css背景透明文字不透明

如果背景是单色的,可不用css的透明属性(即opacity),而是使用透明色(利用rgba函数),比如:

<div style="background-color:rgba(255,255,255,0.5)">背景是透明度0.5的红色,文字不透明</div>

如果背景是图片,则可以把背景和文字分别做成两个兄弟关系(而不是父子关系)的层,然后把背景层做成透明,再把文字层覆盖在背景层上即可,比如:

<div style="position:relative">
    <div style="position:absolute; background:url(图片网址自己改) no-repeat; height:40px; width:300px; opacity:0.5"></div>
    <div style="position:absolute">背景是透明度0.5的图片,文字不透明</div>
</div>

猜你喜欢

转载自www.cnblogs.com/dingboyang/p/10991034.html