巧用CSS滤镜做图案文字

2024-01-06 分类：网站建设

请先看看以下演示中的图案文字。这可不是图片效果，而是用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。当然你可以将它们改为其他相同的值而不影响效果，注意不要与字体背景色相同即可

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

新闻名称：巧用CSS滤镜做图案文字
浏览路径：https://www.cdcxhl.com/news26/312276.html

成都网站建设公司_创新互联，为您提供App设计、服务器托管、品牌网站设计、虚拟主机、响应式网站、静态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容