| 導購 | 订阅 | 在线投稿
分享
 
 
 

IE6支持PNG格式圖片的CSS濾鏡寫法

來源:互聯網  2008-08-07 07:35:07  評論

之前一直在用 gif 圖片或者用和背景色相同的 jpg 圖片回避 IE6 不支持 PNG 圖片背景色透明的 BUG,不過在做大菠蘿3(Diablo III)主題時不願放棄自己一個比較酷的 Idea,所以我還是決定要解決這個 BUG。

網上關于解決 IE6 這個 BUG 的方法很多,有用 JS 的,也有用 IE6 的 CSS 濾鏡的。稍微看了一下,JS 的方法僅用于單個圖片的效果,但若拿圖片作背景則不行。CSS 濾鏡的寫法則簡單很多,也能用作背景,但還是存在一個問題,圖片的地址只能使用「絕對地址」,而我們在模板的 CSS 樣式表裏使用的大多是相對地址,雖然也可以使用絕對地址,但是不同的用戶使用該模板的話就必須修改其絕對地址,對于不懂 CSS/HTML 的人來說,無疑這是一道「坎」。不過後來貓貓的一句話讓我如夢初醒——可以把這段 CSS 寫在 head 裏,這樣就可以用 Wordpress 自己的 PHP 語句來調用絕對地址了!

讓 IE6 支持 PNG 圖片背景透明的 CSS 濾鏡寫法如下:

*html #image-style {

background-image: none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(src="filename.png", sizingMethod="scale");

}

這裏我寫了一個實例:http://zeuscn.net/download/ie6png.html

使用 Firefox 和 IE7 浏覽器看的話,2張圖片沒有區別,但使用 IE6 核心的浏覽器看的話會發現第一張圖片有白色背景——第一張圖片是直接添加而沒有使用濾鏡。

#test {

background:url(h2-bg.png) no-repeat;

*background-image: none;

*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(src="http://zeuscn.net/download/h2-bg.png", sizingMethod="scale");

height:85px;

width:66px;

}

我們可以從實例中的代碼看到,由于 HTML 文件和圖片 h2-bg.png 位于相同目錄,所以這裏的背景鏈接我是使用的相對地址。而下面的 CSS 濾鏡我使用的是絕對地址。這裏我爲了兼容 Firefox IE6 和 IE7 我使用了 Hack 的寫法:屬性前添加 「*」 ——只讓 IE 核心的浏覽器識別。

那麽在 Wordpress 模板的 head 標簽內的 CSS 樣式表調用之後,添加了下面的樣式代碼來繞過在樣式表內使用絕對地址的問題:

<link href="<?php bloginfo('stylesheet_directory'); ?>/style.css" rel="stylesheet" type="text/css" />

<style>

.post .title-bg {

height:85px;

width:65px;

*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(src="<?php bloginfo('stylesheet_directory'); ?>/images/h2-bg.png", sizingMethod="scale");

position:absolute;

}

</style>

這個效果的具體樣式是什麽樣的呢?嘿嘿,主題發布之日就能揭曉了~

之前一直在用 gif 圖片或者用和背景色相同的 jpg 圖片回避 IE6 不支持 PNG 圖片背景色透明的 BUG,不過在做大菠蘿3(Diablo III)主題時不願放棄自己一個比較酷的 Idea,所以我還是決定要解決這個 BUG。 網上關于解決 IE6 這個 BUG 的方法很多,有用 JS 的,也有用 IE6 的 CSS 濾鏡的。稍微看了一下,JS 的方法僅用于單個圖片的效果,但若拿圖片作背景則不行。CSS 濾鏡的寫法則簡單很多,也能用作背景,但還是存在一個問題,圖片的地址只能使用「絕對地址」,而我們在模板的 CSS 樣式表裏使用的大多是相對地址,雖然也可以使用絕對地址,但是不同的用戶使用該模板的話就必須修改其絕對地址,對于不懂 CSS/HTML 的人來說,無疑這是一道「坎」。不過後來貓貓的一句話讓我如夢初醒——可以把這段 CSS 寫在 head 裏,這樣就可以用 Wordpress 自己的 PHP 語句來調用絕對地址了! 讓 IE6 支持 PNG 圖片背景透明的 CSS 濾鏡寫法如下: *html #image-style { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="filename.png", sizingMethod="scale"); } 這裏我寫了一個實例:[url=http://zeuscn.net/download/ie6png.html]http://zeuscn.net/download/ie6png.html[/url] 使用 Firefox 和 IE7 浏覽器看的話,2張圖片沒有區別,但使用 IE6 核心的浏覽器看的話會發現第一張圖片有白色背景——第一張圖片是直接添加而沒有使用濾鏡。 #test { background:url(h2-bg.png) no-repeat; *background-image: none; *filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="[url=http://zeuscn.net/download/h2-bg.png]http://zeuscn.net/download/h2-bg.png[/url]", sizingMethod="scale"); height:85px; width:66px; } 我們可以從實例中的代碼看到,由于 HTML 文件和圖片 h2-bg.png 位于相同目錄,所以這裏的背景鏈接我是使用的相對地址。而下面的 CSS 濾鏡我使用的是絕對地址。這裏我爲了兼容 Firefox IE6 和 IE7 我使用了 Hack 的寫法:屬性前添加 「*」 ——只讓 IE 核心的浏覽器識別。 那麽在 Wordpress 模板的 head 標簽內的 CSS 樣式表調用之後,添加了下面的樣式代碼來繞過在樣式表內使用絕對地址的問題: <link href="<?php bloginfo('stylesheet_directory'); ?>/style.css" rel="stylesheet" type="text/css" /> <style> .post .title-bg { height:85px; width:65px; *filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="<?php bloginfo('stylesheet_directory'); ?>/images/h2-bg.png", sizingMethod="scale"); position:absolute; } </style> 這個效果的具體樣式是什麽樣的呢?嘿嘿,主題發布之日就能揭曉了~
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有