巧用CSS滤镜做图案文字_新疆二域设计网络公司

网站地图 | 联系我们 | 咨询热线:0991-4811639

※	您现在的位置：新疆二域设计网络公司 >> 网页设计学院 >> 网页制作 >> HTML-CSS >> 正文

　　请先看看以下演示中的图案文字。这可不是图片效果，而是用CSS滤镜中的Chroma() 语句做成的文本文字，其中文本的内容和图案都可以自由设定。

　　先介绍一下这个神奇的滤镜：Chroma() 滤镜。

　　语法： FILTER:Chroma( Color=#CCCCCC) ，其中“#CCCCCC”是颜色值。

　　作用效果：如果滤镜中的像素有颜色与设定的颜色相同，则该像素变为透明（包括图片的像素）。例如使用的语句是 FILTER:Chroma( Color=#CCCCCC) ，则滤镜作用范围内所有颜色为“#CCCCCC”的像素都变为透明。

　　效果演示：

　　以下是拷屏图片，供用低版本浏览器的朋友参考：

　　有了Chroma() 滤镜，图案文字的制作就简单了。它的实现代码只有几行：设计在线　　代码解释：

　　一、先看＜SPAN＞标签，它实际上是作为一个父容器，作用在于设定一个背景图片作为文字的图案：

　　BACKGROUND-IMAGE:URL(across.gif)：设定背景图片，这里是“across.gif”，如右图，原图为8×8像素，这里为便于大家观看，放大为64×64；
　　WIDTH:300px：容器的宽度，可以设小些，甚至是1px，保证背景不溢出。

　　二、下面看 ＜DIV＞标签，它用 Chroma() 滤镜把文字变成透明：

　　Chroma( Color=#CCCCCC) ：设定过滤色为“#CCCCCC”；
　　COLOR: #CCCCCC：文字的颜色也为“#CCCCCC”；
　　BACKGROUND-COLOR: #FFFFFF：字体背景色为“#FFFFFF”（白色）；
　　WIDTH:300px：滤镜作用的宽度，可以设成和父容器的一样或更宽（父容器可以被“撑大”）；
　　FONT: bold 55pt 宋体：设定字体为粗体字、大小为55pt、宋体。

　　因为上面把过滤色和字体颜色都设为了“#CCCCCC”，所以字体是透明的，透过它可以看到父容器的背景图片across.gif。当然你可以将它们改为其他相同的值而不影响效果，注意不要与字体背景色相同即可

作者：佚名 | 文章来源：不详 | 更新时间：2007-5-4 23:57:17

上一篇文章： CSS层叠样式表实用教程（一）

下一篇文章： CSS定义网页标题方法举例

：：最近更新：：

·	Javascript闭包实例讲解
·	FireFox浏览器文本自动换行…
·	CSS的控制文档打印技巧
·	CSS制作下拉菜单方法五中…
·	CSS制作下拉菜单方法四 CS…
·	CSS制作下拉菜单方法三 CS…
·	CSS制作下拉菜单方法二下…
·	CSS制作下拉菜单方法一横…
·	利用.htc文件去除超链接的…
·	iframe标签框架的滚动控制
·	图片缩略图，点击放大到原…
·	CSS实现带背景图片的文字链…
·	javascript在ie和firefox下…
·	Javascript屏蔽鼠标右键并…
·	防止注册机在DVBBS动网论坛…

：：推荐阅读：：

·	网页设计技巧:CSS实现在不…
·	网页制作中XHTML+CSS小技巧
·	CSS定义网页标题方法举例
·	网站首页head区代码规范
·	CSS滤镜之Chroma属性
·	表格边框的css语法
·	背景音乐是如何插入的?
·	CSS语法手册（一）字体属性

QQ：359312 ;地址：新疆乌鲁木齐市友好E时代公寓B座708 邮编：830000