亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

格式png24透明底 多種解決png24格式圖片在ie6中透明問題

  發(fā)布時間：2013-05-24 17:25:49   作者：佚名   我要評論
圖片透明，鋸齒問題是重構(gòu)人員很頭疼的問題，png24可以解決這些鋸齒問題，但是ie6不支持png24透明，不過利用ie6的hack問題有兩種解決的辦法，感興趣的朋友可以了解下哈
圖片透明，鋸齒問題是重構(gòu)人員很頭疼的問題，每當(dāng)遇到這樣的問題都讓我感覺到不知道從哪入手，雖然能解決這些問題，但是總感覺多少有點缺點，最近遇到這方面的問題，總結(jié)了幾種實現(xiàn)一些透明小圖標(biāo)的鋸齒問題：png8格式的透明背景圖片，會讓瀏覽器在先顯示的過程中圖片邊緣會有一些鋸齒情況，png24可以解決這些鋸齒問題，但是ie6不支持png24透明，不過利用ie6的hack問題有兩種解決的辦法：

復(fù)制代碼
代碼如下:

<div class="pwdTipsBg"></div>
<div class="pwdTips">
<span class="closeBtn"></span>
<i class="pwdTipsIcon"></i>
驗證碼錯誤，請?zhí)顚懽钚芦@取的驗證碼！
</div>

1. 利用ie6的hack問題，用兩種格式的圖片來表示；一種其他瀏覽器用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濾鏡解決圖片問題

復(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代碼，通過background導(dǎo)入圖片，這樣所有的瀏覽器均使用了此PNG圖片；

復(fù)制代碼
代碼如下:

background:url(closebtn.png) no-repeat 0 0;

2、通過濾鏡對引入圖片，濾鏡引入圖片的時候是相對于HTML文件，而不是相對于CSS文件，語法如下：

復(fù)制代碼
代碼如下:

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

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

復(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;}

優(yōu)點：
1、綠色無插件；
2、效率高，速度快；
3、網(wǎng)速慢的時候，不會出現(xiàn)先灰底再透明的情況，支持遠(yuǎn)程圖片；
4、支持Hover等偽類，但是得使用兩張圖片，網(wǎng)速慢的情況下，會導(dǎo)致第二張圖片暫時無法顯示，因為還沒有完全載入；

缺點：
1、不支持平鋪，雖然filter有sizingMethod="scale", 拉伸縮放模式，但是圖片會變形，如果單純的顏色或簡單的漸變色還能橫向平鋪；
2、不支持Img標(biāo)簽；
3、不支持CSS Sprite；

相關(guān)文章

  • 部分透明的蒙版效果實現(xiàn)思路(兼容ie6)

    與普通的蒙版效果不一樣，需要有一個空白的地方顯示頁面上原有的動態(tài)內(nèi)容，具體的實現(xiàn)思路如下，感興趣的朋友可以參考下，希望對大家有所幫助
    2013-08-13

  • 純CSS實現(xiàn)背景半透明文字不透明效果兼容IE6

    在某些情況下可能會需要背景半透明文字不透明這樣的效果，實現(xiàn)起來并不復(fù)雜，通過濾鏡便可做到，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助
    2013-08-05

  • 濾鏡使用之圖片透明的css寫法

    圖片透明在某些特殊的情況下還是比較實用的，下面是用濾鏡寫的圖片透明代碼，感興趣的朋友可以參考下哈，希望對大家有所幫助
    2013-07-04

  • 背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5為例)

    本文以背景黑色，透明度0.5舉例為大家詳細(xì)介紹下關(guān)于背景透明，文字不透明的最佳方法同時兼容IE，具體實現(xiàn)如下，感興趣的朋友可以參考下哈希望對大家有所幫助
    2013-07-03

  • 使用濾鏡解決IE6下png圖片不能透明(被渲染成默認(rèn)色)的問題

    IE6不支持透明，所有的透明部分，都被渲染成灰色或白色（不知道啥顏色，他自己的默認(rèn)色）。這樣看起來難看不說，圓角的功能蕩然無存，下面與大家分享下使用濾鏡解決此問題
    2013-06-20

  • 背景半透明效果CSS鏈接樣式代碼

    想不想要自己的主頁鏈接很炫呢，背景半透明的鏈接效果，空鏈接實現(xiàn)的鏈接效果，只需要定義一個特效式的CSS樣式即可以實現(xiàn)，在需要實現(xiàn)的地方應(yīng)用定義的CSS樣式，也可以全站
    2013-02-27

  • img 半透明 處理img加半透明背景實現(xiàn)思路及代碼

    img加半透明背景實現(xiàn)原理：給li加上背景,li的大小就是圖片的大小,在a:hover時候改變a的透明度,感興趣的朋友可以了解下，希望本文可以幫助到你
    2013-01-13

  • IE6下Png透明最佳解決方案DD_belatedPNG

    曾經(jīng)一度的采用濾鏡的方法搞定這個問題，弊端是當(dāng)有多個png圖片的時候，這就造成了css的壓力，得寫多少css代碼呀，也嘗試過js，缺點是不支持CSS中backgrond-position與back
    2013-09-11

最新評論