///pc/img/blank.gif" width="12" height="8">当前位置：///default.htm" class="under">亿度网络 -> ///pc/index.htm" class="under">网页制作教程 -> CSS教程

CSS教程 ///pc/img/title_00.gif" width="13" height="20">  

　→ CSS快速入门
　→ 怎样编写CSS
　→ CSS属性
　→ CSS定位
　→ CSS滤镜
　　 1.概述
　　 2.Alpha属性
　　 3.Blur属性
　　 4.Chroma属性
　　 5.Dropshadow属性
　　 6.Fliph、Fliv属性
　　 7.Gray属性
　　 8.Glow属性
　　 9.Invert属性

/pc/bin/msg.pl?file_id=k_css target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法

 

///pc/img/blank.gif" width="1" height="1">

 


五、CSS滤镜

   

　　4、Chroma属性

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

　　Filter：Chroma（color=color）

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

///pc/homepage/css/img/css030.gif" width="231" height="125" border="0" alt="原图">

　　图中显示两种字体，两种颜色，我们现在对“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的属性设置，使绿色透明。显示效果如下图：

///pc/homepage/css/img/css031.gif" width="182" height="117" border="0" alt="chroma属性效果">

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

///pc/homepage/css/img/css032.gif" width="232" height="133" border="0" alt="ie下的显示">

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

　　本节我们讲述了chroma属性的应用，下一节将向您介绍Dropshadow属性。

上一节　下一节   

 

/pc/bin/msg.pl?file_id=k_css target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法

 

 

网页制作 网页设计 网站建设 网站设计 网站制作 做网站 做网页