最近在工作中遇到一个问题,我在div里写上文字，当我把div变为半透明的时候，里面的文字也会随之透明。而对应的需求是背景透明色,但是文字不要透明的效果.

<div class="box">
    这是一段不应该透明的文字
</div>

.box{width: 300px;height: 25px;line-height:25px;background: red;opacity: 0.5}

这样我的文字几乎看不清，这当然不是我想要的，随即去查询资料，找到了一个解决办法，使用css3的属性：

.box{width: 300px;height: 25px;line-height:25px;background: rgba(255,0,0,0.5);}

这种方式是利用css3的新属性，更改背景的透明度，这样就不会影响到内容的透明度，但是有一个问题就是目前很多浏览器对css3的属性不支持，没办法，为了兼容该死的IE，还是琢磨出兼容的写法吧。

<div class="box"></div>  //专门用来做背景
<div class="text">
    这是一段不应该透明的文字
</div>

.box{width: 300px;height: 25px;font-size: 24px;background: red;opacity: 0.5;position: absolute;left: 0;top: 0;}
.text{position: absolute;z-index: 10;left: 0;top: 0;}

把文字和背景放在不同的层里面，目前也只有这个笨方法来实现了，等到脑残的不标准的IE滚出浏览器界的时候，我们的CSS3就能派上大用场了。 其中我自己制作的幼儿园网站的专题页面就有这种效果的需求.测试连接地址: http://pyb.901web.com/index.php?m=special&c=index&specialid=9