Home思洋影视事业部网站建设知识库
0 Comments

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

发布于：2013-08-21  |   作者：广州网站建设  |   已聚集：人围观

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

CSS滤镜透明效果:Chroma属性

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



    
	
  1. 
		Filter：Chroma（colorcolor=color）  
    2. 
	
  2. 
		 
    3. 




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

	广州网站建设,网站建设,广州网页设计,广州网站设计



	



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




    
	
  1. 
		<html> 
    2. 
	
  2. 
		　<head> 
    3. 
	
  3. 
		　<title>chromafilter</title> 
    4. 
	
  4. 
		　<style> 
    5. 
	
  5. 
		　<!--  
    6. 
	
  6. 
		　div{position：absolute；top：70；width：200；  
    7. 
	
  7. 
		　filter：chroma(color=green)}  
    8. 
	
  8. 
		　//*定义DIV范围内绿色为透明色，另外设置DIV的位置*//  
    9. 
	
  9. 
		　p{font-family：bailey；font-size：48；font-weight：bold；  
    10. 
	
  10. 
		　color：green}//*设置P的字体名称、大小、粗细、颜色*//  
    11. 
	
  11. 
		　em{font-family:lucidahandwritingitalic；font-size:48；  
    12. 
	
  12. 
		　font-weight：bold；color：rgb(255,51,153)}  
    13. 
	
  13. 
		//*设置EM的字体名称、大小、粗细、颜色*//  
    14. 
	
  14. 
		　--> 
    15. 
	
  15. 
		　</style> 
    16. 
	
  16. 
		　</head> 
    17. 
	
  17. 
		　<body> 
    18. 
	
  18. 
		　<div> 
    19. 
	
  19. 
		　<p>LEAVES<em>LOVE</em></p> 
    20. 
	
  20. 
		　</div> 
    21. 
	
  21. 
		　</body> 
    22. 
	
  22. 
		</html> 
    23. 




	通过上面代码中对chroma属性设置，使绿色透明。显示效果如下图：



	



	我们看到绿色的leaves字体不见了，实际上它是透明了，在IE下点击它所在的区域，它还是会显示出来（见下图）：



	



	另外，需要注意的是，chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理（比如JPG、GIF等格式），所以它们很少有固定的位置可以设置为透明。

	广州网站建设,网站建设,广州网页设计,广州网站设计


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机