css 透明度属性继承问题

上代码：

<div id="zx">
    <div class="div1">
	<span>看这里看这里看这里！这里是有透明度的！</span>
     </div>
</div>

css:

.div1 { width: 200px; height: 200px; background: #f33;opacity: 0.3;filter: alpha(opacity=30);}

当给div1设置透明度后，span里面的文字也将“继承”父级元素的透明度属性，但是这种情况并非是我们想要的。那如何将里面文字的不透明度去除呢?

有一种比较常见的方法：

        将内容部分放入一个与透明层同级的标签中，包含在同一个元素下。父元素的position设置为relative，子元素设置为absolute来覆盖

代码如下：

<div id="zx">
     <div class="div1"></div>
     <span>看这里看这里看这里！这里已经取消了透明度！！
</div>

css:

.div1,span{ width: 200px; height: 200px; background: #f33;opacity: 0.3;filter: alpha(opacity=30);position:absolute;}
.zx{ position:relative;}