巧用CSS滤镜做图案文字

请先看看以下演示中的图案文字。这可不是图片效果，而是用css滤镜中的chroma() 语句做成的文本文字，其中文本的内容和图案都可以自由设定。
先介绍一下这个神奇的滤镜：chroma() 滤镜。
语法： filter:chroma( color=#cccccc) ，其中“#cccccc”是颜色值。
作用效果：如果滤镜中的像素有颜色与设定的颜色相同，则该像素变为透明（包括图片的像素）。例如使用的语句是 filter:chroma( color=#cccccc) ，则滤镜作用范围内所有颜色为“#cccccc”的像素都变为透明。
有了chroma() 滤镜，图案文字的制作就简单了。它的实现代码只有几行：<span style=background-image: url(across.gif); width: 300px><div style=filter: chroma( color=#cccccc);color: #cccccc; background-color: #ffffff;width: 300px; font: bold 55pt 宋体>设计在线</div></span>代码解释：
一、先看＜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。当然你可以将它们改为其他相同的值而不影响效果，注意不要与字体背景色相同即可


盘锦SEO优化中如何提升用户体验?
网站开发代码的可读性原则
专业网站设计制作公司是如何设计网站的？
解答：模板网站和定制网站客户如何选择呢？
网站内链到底有什么用呢？
农产品在互联网路上愈发宽广
网站建设设计时需要注意哪些问题-网站建设分享
SSL免费证书安全吗