模塊的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及以前版本不做考慮。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈