使用css解決png透明圖片在ie6正常顯示的方法

來源:互聯網
上載者:User
很久沒寫CSS了,遇到一個png透明logo折騰了我很久,也怪以前的頁面直接不考慮透明的問題。在網上找到幾種辦法,有用css實現的,有些是用js實現,用js感覺大材小用了,能用純css解決就css吧,這裡感謝藍莓公主的協助。以下的兩種方法都是嘗試過可行的,不過在我的虛擬機器下的ie6圖片完全透明了,不知道是不是我虛擬機器的問題。
先將圖片存為 PNG-24 透明格式。
(圖片要絕對路徑)
方法一:用png圖作背景
要注意hack
html代碼
<div class="logo"><a href="/">logo</a></div>
css代碼
.logo { width: 338px; height: 57px; float: left; url( /images/logo.png) 0px 0px no-repeat!important; text-indent: -1000px; _background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'#\'" /images/logo.png', senabled='true', sizingMethod='scale'); }

標準:_background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'#\'" /templets/dyimgs/wymrs/images/logo.png', enabled='bEnabled', sizingMethod='image');


方法二:插入png圖片,定義img
這個方法要準備一完全透明的圖片transparent.gif,大小隨意。
html代碼
<div class="logo"><a href="/"><img src=\'#\'" /images/logo.png" alt="logo" /></a></div>
css代碼
.logo { width: 338px; height: 57px; float: left; }
.logo img { width: 338px; height: 57px; }
/* png 透明 相容 ie6 */
.logo img {
azimuth: expression(
this.pngSet ? this.pngSet = true:(this.nodeName == "IMG" && "http://blog.51cto.com/viewpic.php?refimg=" + this.src.toLowerCase().indexOf('.png')>-1 ? (this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'#\'" //qianduangcs.blog.51cto.com/2624849/" + "http://blog.51cto.com/viewpic.php?refimg=" + this.src + "', sizingMethod='image')",
"http://blog.51cto.com/viewpic.php?refimg=" + 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=\'#\'" //qianduangcs.blog.51cto.com/2624849/" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
);
}

有時候超連結加了這個透明濾鏡,然後頁面上所有超級串連 <a href=""> </a>全點不到了 ,解決辦法是:

給a加上position:relative;

不過這裡要提醒你,你這裡的image路徑是相對路徑,那麼值得注意的是,這個相對路徑是根據html相對的,而不是CSS。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.