現在做很多頁面,比如陰影,或很多情況要用到透明圖,GIF圖一般會有很多鋸齒,
用PNG圖吧,效果到是還好。Firefox和IE7以上版本都 支持PNG透明,但IE6缺會顯示灰白。
百度,google搜羅一通,現總結如下兩種。如有更好的方案,望交流
第一種,適用于圖片做背景的時候。
代碼:
?
<style> body { background: url(body-bg.jpg); /* 添加基本背景圖 */ } .vehicles { width: 500px; height: 176px; background: url(vehicles.png) no-repeat; /* 為vehicles類添加背景圖 */ } /* 注:我在vehicles類名前添加了”html”, 我這樣做就不會使background屬性與另一個樣式表沖突了. */ html .vehicles { background: none; /* 隱藏當前背景圖從而使用后面的濾鏡重置它 */ width: 500px; /* 必須指定寬度 */ height: 176px; /* 必須指定高度 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png'); } </style> <div class=”vehicles”></div>?
第二 種,適用于PNG圖片放在頁面上的時候
/*-------------IE6-PNG透明 ------------------------*/ * html img, * html .png{ behavior: e-xpression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true) ); } /*-------------------------------------------------------------------------*/?
下面是源代碼
png透明圖FOR-IE6.rar
---------------------------------------------------------------------------------------
?
第三種解決方案
附上DEMO。有需要可以下載看看。
PNG-ie6-透明
?
?
我一般采用后兩個方案的結合,一個是用在頁面中的圖片,一個用在容器背景中的圖片。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
