背景透明在不同场景中可以使用opcatiy或者rgba函数实现。

单色背景

可不用css的透明属性（即opacity），而是使用透明色（利用rgba函数），比如：

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

图片背景

将图片跟文字设置成兄弟关系，对图片设置opacity属性，把文字设置成绝对定位，然后将其定位到图片上

<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>

FYI: