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

之前一直在用 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>

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

css插入透明png(IE6下PNG背景透明)
PNG圖片支持透明~很不錯,可是在IE6下卻不能正確顯示透明部分,使用這個css可以解決這個問題(還有其他方法,不過百度空間只能用css~_~)filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="png圖片地址...查看完整版>>css插入透明png(IE6下PNG背景透明)
 
新手基礎學習:背景圖片CSS在不同位置的寫法
  本文是寫給新手的,高手就不要看了。  我們在制作網頁時,有時爲了美化網頁,會爲網頁添加上背景圖片   現在我們制作網頁一般都是使用CSS來控制布局和頁面效果的(css.css文件一般都是與圖片文件放在同一個文...查看完整版>>新手基礎學習:背景圖片CSS在不同位置的寫法
 
關于799圖片及鈴聲支持的格式
799做爲一款剛上市的新機型有不少朋友都不清楚它支持的格式,這樣給大家下載圖片和鈴聲的時候帶來了不少麻煩,下面我就具有說說799支持的格式。 關于圖片799可以支持BPM,JPG和GIFA(會動的)這幾種格式,待機圖片...查看完整版>>關于799圖片及鈴聲支持的格式
 
關于E108支持圖片的格式
大家都知道108支持的圖片格式有JPG和GIF,其實他還可以支持BMP格式的文件的。具體就是在文本短信中,添加項目裏有添加圖片,添加動畫,添加鈴聲。其實那個添加圖片就是添加的BMP格式的圖片文件。大家可以試試,發條圖...查看完整版>>關于E108支持圖片的格式
 
IE6圖片元素img下出現多余空白問題-css設計
  在進行頁面的DIV+CSS排版時,遇到IE6(當然有時Firefox下也會偶遇)浏覽器中的圖片元素img下出現多余空白的問題絕對是常見的對于該問題的解決方法也是“見機行事”,根據原因的不同要用不同的解決方法,這裏把解...查看完整版>>IE6圖片元素img下出現多余空白問題-css設計
 
妙用CSS濾鏡爲圖片加上特殊效果
  有時候,我們需要給網頁中的圖片加一些特殊的效果,比如透明、扭曲、陰影或者翻轉等,我們一般都會想到用Photoshop等一些圖形軟件來處理,其實我們也可以利用CSS(層疊式樣表)提供的一些濾鏡來處理,這對于不熟悉...查看完整版>>妙用CSS濾鏡爲圖片加上特殊效果
 
妙用CSS濾鏡爲圖片加上特殊效果
有時候,我們需要給網頁中的圖片加一些特殊的效果,比如透明、扭曲、陰影或者翻轉等,我們一般都會想到用Photoshop等一些圖形軟件來處理,其實我們也可以利用CSS(層疊式樣表)提供的一些濾鏡來處理,這對于不熟悉Phot...查看完整版>>妙用CSS濾鏡爲圖片加上特殊效果
 
妙用CSS濾鏡爲圖片加上特殊效果
有時候,我們需要給網頁中的圖片加一些特殊的效果,比如透明、扭曲、陰影或者翻轉等,我們一般都會想到用Photoshop等一些圖形軟件來處理,其實我們也可以利用CSS(層疊式樣表)提供的一些濾鏡來處理,這對于不熟悉Phot...查看完整版>>妙用CSS濾鏡爲圖片加上特殊效果
 
靜態圖片的十一種濾鏡效果--不支持Ie7及非IE浏覽器。
請新建文件TestImage.html注意:靜態圖片的十一種濾鏡效果--不支持Ie7及非IE浏覽器。內容如下,(可自行修改):<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o...查看完整版>>靜態圖片的十一種濾鏡效果--不支持Ie7及非IE浏覽器。
 
 
回到王朝網路首頁