IE6 使用png透明圖片的方法 [非JS方法]
在IE7和Firefox下肯定沒問題！但是到了IE6下透明部分就變成灰色了。
如何使用我們前面說的AlphaImageLoader濾鏡呢？很簡單代碼可以這樣寫（已top區域為例）：
1
2
3
4
5
6
7
|
CSS style="FONT-FAMILY: monospace">.header .top{ width:1000px; height:116px; margin-left:auto; margin-right:auto; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( |
這樣我們在IE6下看效果的時候PNG的透明層就起作用了。但是當我們返回Firefox的時候，PNG的圖沒了？別急這是因為AlphaImageLoader濾鏡是IE系列瀏覽器的專屬標簽，Firefox當然不支持了。必須使用background-image屬性在Firefox下才起作用：
如果我們這樣吧background-image加入到CSS樣式中的話，如下：
1
2
3
4
5
6
7
8
|
.header .top{ width:1000px; height:116px; margin-left:auto; margin-right:auto; background-image:url(/wp-content/themes/xilin/images/topbg.png); |
這樣我們在IE6下看效果的時候PNG的透明層就起作用了。但是當我們返回Firefox的時候，PNG的圖沒了？別急這是因為AlphaImageLoader濾鏡是IE系列瀏覽器的專屬標簽，Firefox當然不支持了。必須使用background-image屬性在Firefox下才起作用：
如果我們這樣吧background-image加入到CSS樣式中的話，如下：
1
2
3
4
5
6
7
8
|
.header .top{ width:1000px; height:116px; margin-left:auto; margin-right:auto; background-image:url(/wp-content/themes/xilin/images/topbg.png); |
會發現IE6下的PNG透明效果又沒了！這個是因為在IE6下background-image也起作用了，在IE6下就有兩個圖重疊在一起，另一個屬性會把灰色部分顯示出來，所以我們必須使用一些小技巧，讓瀏覽器只去讀屬于自己的樣式代碼。
我們知道Firefox、Opera等完全支持PNG透明圖片的瀏覽器也支持子選擇器（>），而IE不識別（包括IE7），所有我們可以通過這來定義Firefox、Opera等瀏覽器中PNG圖片的樣式。
代碼如下：
1
2
3
4
5
|
HTML > body .top{ /* for Firefox */ background-image:url(/wp-content/themes/xilin/images/topbg.png); background-repeat: no-repeat; background-position: center center; } |
同時，我們通過只有IE才識別的通配符（∗），來定義IE瀏覽器中的濾鏡。代碼如下：
1
2
3
|
* .top{ /* for IE6 */ _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( |
這樣，咱們要的效果就出來了，IE6、IE7、Firefox、Opera瀏覽器都能很好的顯示這些透明圖層，而互不干擾。
注意：AlphaImageLoader濾鏡會導致該區域的鏈接和按鈕無效，解決的辦法是為鏈接或按鈕添加：position: relative;這樣條代碼，使其相對浮動。AlphaImageLoader無法設置背景的重復，所以對圖片的切圖精度會有很高的精確度要求。
像本BLOG的header中的搜索部分一樣，大家可以自己去測試一下效果，我也都不多說了，簡單的寫一下只是起個拋磚引玉的效果，如果大家有更好的辦法，希望能拿出來一起分享！
如對本文有疑問，請提交到交流論壇，廣大熱心網友會為你解答??！ 點擊進入論壇
您可能感興趣的文章:
鄂公網安備 42011102001344號 Copyright © 2013-2021