您現在的位置: 365建站網 > 365學習 > IE6 使用png透明圖片的方法 [非JS方法]

IE6 使用png透明圖片的方法 [非JS方法]

文章來源:365jz.com     點擊數:33741    更新時間:2009-12-07 11:40   參與評論

在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(
enabled=true, sizingMethod=scale, src
="/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); 
/* Firefox只支持這個方式 */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
enabled=true, sizingMethod=scale, src
="/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); 
/* Firefox只支持這個方式 */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
enabled=true, sizingMethod=scale, src
="/wp-content/themes/xilin/images/topbg.png"); }

會發現IE6下的PNG透明效果又沒了!這個是因為在IE6background-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(
enabled=true, sizingMethod=scale, src
="/wp-content/themes/xilin/images/topbg.png");
/* 這里在樣式前加下劃線是為了防止IE7瀏覽器來讀取這個樣式 */ }

這樣,咱們要的效果就出來了,IE6、IE7、Firefox、Opera瀏覽器都能很好的顯示這些透明圖層,而互不干擾。

注意AlphaImageLoader濾鏡會導致該區域的鏈接和按鈕無效,解決的辦法是為鏈接或按鈕添加:position: relative;這樣條代碼,使其相對浮動。AlphaImageLoader無法設置背景的重復,所以對圖片的切圖精度會有很高的精確度要求。

像本BLOG的header中的搜索部分一樣,大家可以自己去測試一下效果,我也都不多說了,簡單的寫一下只是起個拋磚引玉的效果,如果大家有更好的辦法,希望能拿出來一起分享!

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (33741人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 国产精品亚洲片在线| 色综合av社区男人的天堂| 老外又粗又长一晚做五次| 在公车上露出奶头自慰| 老师好棒再大点| 十分钟免费视频观看在线| 美女裸体黄网站18禁免费看| 无码区a∨视频| 泑交14| 中文字幕换人妻好紧| 欧美老熟妇欲乱高清视频| 免费人成短视频在线观看网址| 另类人妻校园卡通技巧第十页| 多人一起做人爱视频| 成·人免费午夜无码视频在线观看| 热久久| 边做菜边摸边爱爱好爽| 国产麻豆剧果冻传媒观看| 波多野结衣无码| Zoofilivideo人馿交| 一边吃乳一手摸下面| 双性美人哭唧唧喷水| 中国人的免费视频| 日本vr片源在线看| 五月婷| 久久是热频这里只有精品| 美女视频免费高清视频| 熟妇人妻午夜寂寞影院| 神马影院我不卡| 亚洲性久久久影院| 年轻人免费观看视频| http://www.oknori.com