Chroma屬性實(shí)現(xiàn)CSS濾鏡透明效果
作者：admin
你對(duì)CSS濾鏡透明效果是否熟悉，這里向大家描述一下實(shí)現(xiàn)CSS濾鏡透明效果的Chroma屬性的用法，Chroma屬性可以設(shè)置一個(gè)對(duì)象中指定的顏色為透明色。
本文向大家描述一下CSS濾鏡透明效果的實(shí)現(xiàn)，Chroma屬性可以設(shè)置一個(gè)對(duì)象中指定的顏色為透明色，這個(gè)屬性的表達(dá)式是不是很簡(jiǎn)單，它只有一個(gè)參數(shù)。只需把您想要指定透明的顏色用Color參數(shù)設(shè)置出來(lái)就可以了。
CSS濾鏡透明效果:Chroma屬性
Chroma屬性可以設(shè)置一個(gè)對(duì)象中指定的顏色為透明色，它的表達(dá)式如下：
- Filter：Chroma（colorcolor=color）
這個(gè)屬性的表達(dá)式是不是很簡(jiǎn)單，它只有一個(gè)參數(shù)。只需把您想要指定透明的顏色用Color參數(shù)設(shè)置出來(lái)就可以了。比如下面這幅圖：
圖中顯示兩種字體，兩種顏色，我們現(xiàn)在對(duì)“leaves”字體添加chroma屬性，使其透明。代碼如下：
- <html>
- <head>
- <title>chromafilter</title>
- <style>
- <!--
- div{position：absolute；top：70；width：200；
- filter：chroma(color=green)}
- //*定義DIV范圍內(nèi)綠色為透明色，另外設(shè)置DIV的位置*//
- p{font-family：bailey；font-size：48；font-weight：bold；
- color：green}//*設(shè)置P的字體名稱、大小、粗細(xì)、顏色*//
- em{font-family:lucidahandwritingitalic；font-size:48；
- font-weight：bold；color：rgb(255,51,153)}
- //*設(shè)置EM的字體名稱、大小、粗細(xì)、顏色*//
- -->
- </style>
- </head>
- <body>
- <div>
- <p>LEAVES<em>LOVE</em></p>
- </div>
- </body>
- </html>
通過(guò)上面代碼中對(duì)chroma屬性設(shè)置，使綠色透明。顯示效果如下圖：
我們看到綠色的leaves字體不見了，實(shí)際上它是透明了，在IE下點(diǎn)擊它所在的區(qū)域，它還是會(huì)顯示出來(lái)（見下圖）：
另外，需要注意的是，chroma屬性對(duì)于圖片文件不是很適合。因?yàn)楹芏鄨D片是經(jīng)過(guò)了減色和壓縮處理（比如JPG、GIF等格式），所以它們很少有固定的位置可以設(shè)置為透明。
詳文參考：http://www.mypchelp.cn/it/200906/49370.shtml
【編輯推薦】
責(zé)任編輯：佚名
來(lái)源：
mypchelp.cn
