格式png24透明底多種解決png24格式圖片在ie6中透明問(wèn)題

2024-07-11 08:28:48

字體：大中小

供稿：網(wǎng)友

圖片透明，鋸齒問(wèn)題是重構(gòu)人員很頭疼的問(wèn)題，每當(dāng)遇到這樣的問(wèn)題都讓我感覺到不知道從哪入手，雖然能解決這些問(wèn)題，但是總感覺多少有點(diǎn)缺點(diǎn)，最近遇到這方面的問(wèn)題，總結(jié)了幾種實(shí)現(xiàn)一些透明小圖標(biāo)的鋸齒問(wèn)題：png8格式的透明背景圖片，會(huì)讓瀏覽器在先顯示的過(guò)程中圖片邊緣會(huì)有一些鋸齒情況，png24可以解決這些鋸齒問(wèn)題，但是ie6不支持png24透明，不過(guò)利用ie6的hack問(wèn)題有兩種解決的辦法：

復(fù)制代碼

代碼如下:
<div class="pwdTipsBg"></div>
<div class="pwdTips">
<span class="closeBtn"></span>
<i class="pwdTipsIcon"></i>
驗(yàn)證碼錯(cuò)誤，請(qǐng)?zhí)顚懽钚芦@取的驗(yàn)證碼！
</div>

1. 利用ie6的hack問(wèn)題，用兩種格式的圖片來(lái)表示；一種其他瀏覽器用png24格式的圖片顯示，ie6用png8格式的顯示，

復(fù)制代碼

代碼如下:
.pwdTipsBg{ height:100%;background:#000; opacity:0.5; position: absolute; left:0; top:0;z-index:1001;
filter: alpha(opacity=50);width:100%; zoom:1;}
.pwdTips{ position:absolute; left:40%;top:40%; z-index:1009; width:285px; background:#ececec; height:55px; padding:45px 20px 10px 80px;}
.pwdTips i{ position:absolute; left:40px; top:40px; background-position:-152px -68px; width:26px; height:26px;}
.pwdTips span{ position:absolute; top:-10px; right:-15px; width:33px; height:33px; background:url(closebtn.png) no-repeat 0 0; _background:url(scsprites.png) no-repeat -119px -63px; cursor:pointer; display:block;}

2. 利用filter濾鏡解決圖片問(wèn)題

復(fù)制代碼

代碼如下:
.pwdTips span{ position:absolute; top:-10px; right:-15px; width:33px; height:33px; background:url(closebtn.png) no-repeat 0 0; _background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/safecenter/closebtn.png"); cursor:pointer; display:block;}

1、書寫正常的CSS代碼，通過(guò)background導(dǎo)入圖片，這樣所有的瀏覽器均使用了此PNG圖片；

復(fù)制代碼

代碼如下:
background:url(closebtn.png) no-repeat 0 0;

2、通過(guò)濾鏡對(duì)引入圖片，濾鏡引入圖片的時(shí)候是相對(duì)于HTML文件，而不是相對(duì)于CSS文件，語(yǔ)法如下：

復(fù)制代碼

代碼如下:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/safecenter/closebtn.png");

代碼寫到這里，我們放到IE6下測(cè)試后發(fā)現(xiàn)IE6還是沒有透明，因?yàn)槲覀冸m然設(shè)置了濾鏡引入圖片，但是background也同樣加載了此圖片，又因?yàn)閎ackground的圖層比濾鏡設(shè)置的高，所以才沒有顯示出來(lái)，
所以最終的代碼設(shè)置為：

上一篇：css布局九決學(xué)css不再難

下一篇：h2在div IE7中不垂直居中問(wèn)題解決方法