欢迎光临
我们一直在努力

巧用CSS滤镜做图案文字-网页设计,HTML/CSS

建站超值云服务器,限时71元/月

 


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

  先介绍一下这个神奇的滤镜:chroma() 滤镜。

  语法: filter:chroma( color=#cccccc) ,其中“#cccccc”是颜色值。

  作用效果:如果滤镜中的像素有颜色与设定的颜色相同,则该像素变为透明(包括图片的像素)。例如使用的语句是 filter:chroma( color=#cccccc) ,则滤镜作用范围内所有颜色为“#cccccc”的像素都变为透明。

  效果演示:


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


  有了chroma() 滤镜,图案文字的制作就简单了。它的实现代码只有几行: <span style="background-image: url(across.gif); width: 300px"> </p> <div style="filter: chroma( color=#cccccc); color: #cccccc; background-color: #ffffff; width: 300px; font: bold 55pt 宋体"><br /> 设计在线 </div> <p></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。当然你可以将它们改为其他相同的值而不影响效果,注意不要与字体背景色相同即可

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 巧用CSS滤镜做图案文字-网页设计,HTML/CSS
分享到: 更多 (0)