來源:http://www.study-code.com/html/web-design/79738.htm
Chroma屬性可以設定一個對象中指定的顏色為透明色,它的運算式如下:
Filter:Chroma(color=color)
這個屬性的運算式是不是很簡單,它只有一個參數。只需把您想要指定透明的顏色用Color參數設定出來就可以了。比如下面這幅圖:
- 執行個體詳解CSS濾鏡(4)Chroma屬性
- DropShadow屬性、Chroma屬性和blur
圖中顯示兩種字型,兩種顏色,我們現在對“leaves”字型添加chroma屬性,使其透明。代碼如下:
<html>
<head>
<title>chroma filter</title>
<style>
<!--
div{position:absolute;top:70;width:200;
filter:chroma(color=green)}
//*定義DIV範圍內綠色為透明色,另外設定DIV的位置*//
p{font-family:bailey;font-size:48;font-weight:bold;
color:green} //*設定P的字型名稱、大小、粗細、顏色*//
em{font-family:lucida handwriting italic;font-size:48;
font-weight:bold;color:rgb(255,51,153)}
//*設定EM的字型名稱、大小、粗細、顏色*//
-->
</style>
</head>
<body>
<div>
<p>LEAVES <em>LOVE</em></p>
</div>
</body>
</html>
通過上面代碼中對chroma的屬性設定,使綠色透明。顯示效果如:
我們看到綠色的leaves字型不見了,實際上它是透明了,在IE下點擊它所在的地區,它還是會顯示出來(見):
另外,需要注意的是,chroma屬性對於圖片檔案不是很適合。因為很多圖片是經過了減色和壓縮處理(比如JPG、GIF等格式),所以它們很少有固定的位置可以設定為透明。