设为首页
联系站长
加入收藏

您的位置: 首页>>IT业界>>互联网>>正文
 巧用CSS滤镜做图案文字
 日期:2005-5-24 2:30:58  来源:100down.com,百当软件园


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

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

   语法 FILTER:Chroma( Color=#CCCCCC) ,其中“#CCCCCC”是颜色值。

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

  效果演示:


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


   有了Chroma() 滤镜,图案文字的制作就简单了。它的实现代码只有几行:

<DIV style="FILTER: Chroma( Color=#CCCCCC); COLOR: #CCCCCC; BACKGROUND-COLOR: #FFFFFF; WIDTH: 300px; FONT: bold 55pt 宋体"> <span style="BACKGROUND-IMAGE: URL(across.gif); WIDTH: 300px"> 设计在线 </span></DIV>

  代码解释:

   一、先看<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巧控制段落缩进
·用CSS实现特殊的字体效果
·用CSS滤镜实现图片暗室效果
·用CSS实现网页图片半透明
·用CSS滤镜实现图片翻转特效
·CSS滤镜应用技巧
·巧用CSS制作文字变图象特效
·巧用CSS制作图象特效
·CSS鼠标属性
·CSS分级属性 二


阅读排行

·Win 2000不能访问Win XP的原因及
·解析Windows中的帐户和权限功能
·如何共享Windows XP操作系统
·Windows XP Service Pack 1
·通过 Windows XP 注册表自定义您
·Windows 2000 TCP/IP协议概述
·Windows 2000 Server TCP/IP协议
·dos常用命令使用说明
·Windows变慢原因分析及解决方法(
·Windows变慢原因分析及解决方法(
·WINXP下强行关闭“杀”不了的进程
·Windows XP系统注册表的恢复

最新文档

·创业激情需冷静 网络代理选择应理
·域名交易平台亟需规范 预防域名买
·Travel旅游域名即将引发抢注潮 
·从原理深处分析如何预防arp攻击
·突破建站弊端 企业网络营销大有可
·如何区分进程和病毒?
·java的基础知识,如何学好java
·微机原理与接口技术基础知识
·如何解决青少年沉迷网络的问题,
·全面分析主板BIOS报警信号

请您注意:
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·您在本站发表的作品,本站有权在网站内转载或引用
·其他网站如果需要转载 本站文章请在贵站著名来源,谢谢合作