实例详解CSS滤镜(4)Chroma属性


答案：Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下： 　　Filter：Chroma（color=color） 
　　这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图：
　　图中显示两种字体，两种颜色，我们现在对“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等格式），所以它们很少有固定的位置可以设置为透明。
上一个：网页文字竖排样式表（CSS）法
下一个：柱状统计图表的CSS实现
更多图片编程知识: