Chroma属性实现CSS滤镜透明效果-css 滤镜

本文向大家描述一下CSS滤镜透明效果的实现，Chroma属性可以设置一个对象中指定的颜色为透明色，这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。

CSS滤镜透明效果:Chroma属性

Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下：

　　Filter：Chroma（colorcolor=color）

　　这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图：

　　图中显示两种字体，两种颜色，我们现在对“leaves”字体添加chroma属性，使其透明。代码如下：　　

<html> 
　　　<head> 
　　　<title>chromafilter</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:lucidahandwritingitalic；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等格式），所以它们很少有固定的位置可以设置为透明。

详文参考：http://www.mypchelp.cn/it/200906/49370.shtml

【编辑推荐】