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>

 

转载于:https://www.cnblogs.com/dingboyang/p/10991034.html