巧用CSS滤镜做图案文字

2016-01-29 12:13 46 1 收藏

巧用CSS滤镜做图案文字,巧用CSS滤镜做图案文字

【 tulaoshi.com - Html 】


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

来源:https://www.tulaoshi.com/n/20160129/1485119.html

延伸阅读
  7、Gray ,Invert,Xray 滤镜 语法:{filter:gray} ,{filter:invert},{filter:xray} Gray滤镜是把一张图片变成灰度图;Invert滤镜是把对象的可视化属性全部翻转,包括色彩、饱和度、和亮度值;Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的“X”光片。 效果如下: 8、Light  滤镜 语法:Filter{light} ...
本教程介绍利用滤镜效果制作漂亮的抽象效果,PS的滤镜功能非常强大,本教程只用了几种滤镜,效果就非常漂亮了,其它的好方法还等你去开发。 最终效果 1.新建一个图层背景填充为黑色,执行菜单:滤镜 渲染 镜头光晕,从不同的角度多照几次。效果如下图 2.Ctrl + U调色相/饱和度,参数设置如下图 3.执行菜单:滤镜 像素化 ...
标签: Web开发
table cellpadding="0" cellspacing="0" width="100%" height="22" border="0"   tr   td bgcolor="#FFFFFF"/td   td width="50%"/td   td width="50%"/td   /tr   /table
蓝色理想 作者:djwuwuwu 最终效果1 最终效果2 1、新建一个666 * 666像素的文件,新建一个图层,按字母“D”,把前背景颜色恢复到默认的黑白,执行:滤镜 渲染 云彩,效果如下图。 2、执行:滤镜 渲染 纤维,效果如下图。 3、执行:滤镜 模糊 动感模糊,参数设置如下图。 4、执行:滤镜 模糊 高斯模糊,参数设...
标签: PS PS教程
  文/肖明德 Photoshop6.0里面有很多滤镜,巧用这些滤镜可以制作出各种各样的图像效果。通过本例你可以学习灵活应用Photoshop6.0的一些基本滤镜制作木桩的方法。 下面是具体的操作步骤: 1. 启动Photoshop。 2. 选择File菜单,单击NEW命令(或按快捷键ctrl+n),弹出new对话框,如图1所示。 图1 ...

经验教程

98

收藏

79
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部