繁體中文当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 巧用CSS滤镜做图案文字
- HTML/XHTML教程
- CSS基础：设计网页常用规范详解
- CSS教程：十步学会用css建站
- CSS基础：24条网页布局开发小技巧
- CSS教程：在网页布局中简单实现垂直居中的办法
- css基础教程：颜色和文本属性的控制
- 专家总结：网页设计师必须遵守的十条守则
- html技巧：超级链接a的提示和打开方式
- css教程：学习背景图像属性background
- 例说网页Semantics：Html/Xhtml是否真正符合标准
- IE7与web标准设计系列教程：前言
- IE7与web标准设计系列教程：更丰富的CSS选择符
- IE7与web标准设计系列教程：修正引起页面布局混乱的祸首
- web标准教程：IE6和IE7的共存
- web标准：IE多版本共存的解决方案：IETester
- CSS基础教程：认识CSS选择符
- web标准：比较IE6与IE7，放纵的孩子与严厉的父亲
- 学好标准CSS的模型是否必须放弃IE？
- CSS教程：如何处理有冲突的CSS规则
- 教你用html和css写出漂亮正规的Blog
- CSS基础：如何避免table强迫症
HTML/XHTML教程 中的 巧用CSS滤镜做图案文字
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 37 ::
收藏到网摘: n/a
请先看看以下演示中的图案文字。这可不是图片效果，而是用CSS滤镜中的Chroma() 语句做成的文本文字，其中文本的内容和图案都可以自由设定。
先介绍一下这个神奇的滤镜：Chroma() 滤镜。
语法： FILTER:Chroma( Color=#CCCCCC) ，其中“#CCCCCC”是颜色值。
作用效果：如果滤镜中的像素有颜色与设定的颜色相同，则该像素变为透明（包括图片的像素）。例如使用的语句是 FILTER:Chroma( Color=#CCCCCC) ，则滤镜作用范围内所有颜色为“#CCCCCC”的像素都变为透明。
效果演示：
先介绍一下这个神奇的滤镜：Chroma() 滤镜。
语法： FILTER:Chroma( Color=#CCCCCC) ，其中“#CCCCCC”是颜色值。
作用效果：如果滤镜中的像素有颜色与设定的颜色相同，则该像素变为透明（包括图片的像素）。例如使用的语句是 FILTER:Chroma( Color=#CCCCCC) ，则滤镜作用范围内所有颜色为“#CCCCCC”的像素都变为透明。
效果演示：
以下是拷屏图片，供用低版本浏览器的朋友参考：
有了Chroma() 滤镜，图案文字的制作就简单了。它的实现代码只有几行：
一、先看＜SPAN＞标签，它实际上是作为一个父容器，作用在于设定一个背景图片作为文字的图案：
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。当然你可以将它们改为相同的值而不影响效果，注意不要与字体背景色相同即可。
评论 (0) All
