我们在使用半透明的过程中，会发现半透明层内的文字也被加上了透明效果，有的时候和我们的设计相背离，如以下效果：
代码:
1.<style type="text/css">
2..box{ width:600px; height:150px; background:#F00;filter:alpha(opacity=50);opacity:0.5; }
3.</style>
4.<div class="box">这里的字也变了颜色</div>
效果1
这里的字也变了颜色
实际上这是css的继承机制，内部的文字继承了外部的div的半透明，如果你的网页只需要兼容IE,那么你的代码可以这样来写，在文字的外部再加一个div，设置此div的position属性为relative，这样IE认为包含文字的div脱离了标准流，样式就不再继承
代码2
1.<div class="box">
2.<div style="position:relative">这里的字在IE下没有变颜色</div>
3.</div>效果2
效果2
如果你的网页只打算兼容ie,那么没问题，父框给他个relative就行了可，但是在其他浏览器里的效果并不随你所愿，只能构造两个div来模拟效果了,原理是使同级的透明的容器和不透明的容器显示重叠，如下代码
代码3
1.<div style="position:relative">
2.<div class="box"></div>
3.<div style=" position:absolute;color:#000; left:0px; top:0px">这里的字体颜色是不是能兼容所有的浏览器呢</div>
4.</div>效果3
效果3
这里的字体颜色是不是能兼容所有的浏览器呢，我在测试的过程中发现，使用
margin-top:-150px想让他重叠，却发现还是有问题，只能通过absolute来设置
这里的字体颜色是不是能兼容所有的浏览器呢，我在测试的过程中发现，使用
margin-top:-150px想让他重叠，却发现还是有问题，只能通过absolute来设置总结:总的来说使用半透明还是比较麻烦的，如果是非必须我们还是换成其他方法，比如做半透明的图片做容器背景，
posted on 2009-06-10 21:47
周锐 阅读(616)
评论(0) 编辑 收藏 所属分类:
CSS 、
HTML