模块的opacity透明与PNG的阴影透明冲突

PNG的透明设置：直接在制作PNF-24模式的图时留有透明度就可以

问题：

今天在处理F7Dialog2.0项目时发现一个问题，那就是在IE中设置了一个模块的透明度后如果该模块内有插入或者设置背景的图片中带有半透明的PNG-24图片时此时的半透明就会渲染错误，造成图片很难看的后果。

原因：

经过研究判断，是filter属性的问题，至于其中的参数和浏览器的渲染模式我搞不清楚，这个有点深，IE专属filter的参数我也只用过alpha的opacity这个，其他的也没有兴趣搞清楚。

解决方案：

以我目前的知识判断，两者不能共存，有了模块透明度，其内部就不要在出现有透明度的PNG，除非你放弃IE浏览器。

所以我选择了IE6使用CSS设置模块透明度，其他浏览器使用PNG设置图片透明度来解决。

示例：
看看我调整后的CSS：
background-image:url("../img/yahoo_style_side.png");
_background-image:url("../img/yahoo_style_side_ie6.png");
_filter:alpha(opacity=80);

第一行给IE6意外的浏览器设置带有半透明的PNG图片
第二行给IE6设置独立的没有半透明的图片
第三行给IE6设置模块透明度

另外在PNG-24图片中设置的透明度需要与IE6 CSS设置的透明度保持一致，这样体验感才能更接近。

综合以上情况，达到的效果是：除IE6不支持PNG半透明，但他支持模块透明。其他浏览器都支持PNG透明；

所以，你的PNG图片中没有渐变的阴影时两者达到的效果是一致的。

当然，如果你的PNG图片不在半透明模块内部，也就不会出现这样的问题。

说明：IE5及以前版本不做考虑。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠