更改CSS2標準中圖像懸停的alpha值？

我想爲我的圖像添加alpha效果。圖像呈圓角矩形形狀。我知道有屬性可以改變CSS3中的alpha，但我試圖符合w3c標準，它仍然是CSS2。更改CSS2標準中圖像懸停的alpha值？

對不起，我沒有正確說明我的問題ealier。我試圖改變alpha時，我懸停在圖像使用CSS2。我正在考慮使用100％alpha的「背景圖像」，並使用img標籤作爲50％alpha。有沒有更好的方法來做到這一點？

2009-07-23 fei

如果圖像是PNG，您可以直接在圖像中包含alpha。當然這需要IE6的PNG Fix腳本。

否則，您可以使用CSS設置透明度。

編輯：更新爲只能在懸停狀態下工作，請注意，這在IE6中不起作用。

img.transparent{ 
    filter: alpha(opacity=100); /* internet explorer */ 
    opacity: 1;   /* fx, safari, opera, chrome */ 
} 

img.transparent:hover { 
    filter: alpha(opacity=50); /* internet explorer */ 
    opacity: 0.5;   /* fx, safari, opera, chrome */ 
}

來源

2009-07-23 19:24:32 tj111

有關PNG和IE6的建議實際上只在處理PNG-24文件時才需要 - IE6支持PNG-8文件，透明度很好。 – 2009-07-23 19:41:40

Web開發者實現透明效果的典型方式是使用部分透明的PNG文件作爲背景。

div { 
    background: #FFF url(img/bg.png) repeat top left; 
}

使用PNG會按照您所期望的，但不透明度不能按預期工作：

div { 
    filter: alpha(opacity=50); /* IE */ 
    -moz-opacity: 0.5; /* Firefox */ 
    -webkit-opacity: 0.5; /* Older Safari, Webkit */ 
    opacity: 0.5; /* CSS Standard - Always last in the list */ 
}

這將使DIV 50％的透明，包括其所有的孩子，文本和所有。您將需要充分利用不透明度設置來確保您按照預期獲得結果。

來源

2009-07-23 19:51:09

更簡單的修復方法是，如果您能忍受IE6的稍差的用戶體驗，則爲所有現代瀏覽器使用透明圖像，並向IE6發送不透明（或僅單色）圖像。對於那些少數用戶來說看起來有點惡化，但是要維護的代碼少得多。

來源

2009-07-23 19:55:13

更改CSS2標準中圖像懸停的alpha值？

回答

相關問題