ie6-ie8中不支持opacity透明度的解决方法

转载于 2015-08-03 09:08:00 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/happyty/p/4698472.html

本文深入探讨了如何在网页设计中利用CSS实现半透明效果，并解决了不同浏览器之间的兼容性问题，特别关注了IE6-IE8等老版本浏览器的兼容性优化。通过提供具体的代码示例和解释，旨在帮助开发者实现跨浏览器一致的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大体结构：灰色半透明部分和城市文字是两个图层，绝对定位到图片的底部。因为放到一个图层的话文字也会变成半透明。
半透明部分设置样式：opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常，是图上的效果。但是这样在ie6-ie8中是不支持的，需要加上下面这句话：

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
此外这种效果不能用ietester中的ie6测试，因为ietester的ie6这样写也是不透明的，但是实际上ie6中已经显示正常了。

以下代码摘自 http://www.w3cplus.com/node/45

/* IE5 - 7 */
filter: alpha(opacity=80); 
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
/* Everyone else */
opacity: 0.8;

转载于:https://www.cnblogs.com/happyty/p/4698472.html