中国站长下载-为中国站长提供最好最全的建站资源! 首 页发布资源有事留言繁體中文
设为首页
加入收藏
联系我们
 
您当前的位置:中国站长下载 -> 文章中心 -> 网页制作 -> HTML/CSS -> 文章内容  虚拟主机 域名注册 退出登录 用户管理
栏目导航
· Dreamweaver · Fireworks
· Flash · 网页特效
· HTML/CSS · 网页配色
热门文章
· sndvol32 - sndvol3...
· [组图] FLASH:《大话李白》...
· 个人网站到底能赚多...
· [图文] Rundll.exe是病毒吗...
· [组图] Flash:制作MV
· 价值12万元的网站SE...
· 网站创业者,你需要...
· 一个成功的网站设计...
· [图文] FLASH:韩国导航条解...
· 中国网站的赚钱模式...
相关文章
· 巧用CSS制作树状目录...
· [图文] 巧用CSS制作图象特效...
· [图文] 巧用CSS制作文字变图...
· 巧用CSS的Border属性...
巧用CSS滤镜做图案文字
作者:风未起时  来源:中国站长学院  发布时间:2005-4-9 21:39:22  发布人:chinazhan

 减小字体 增大字体


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

 
[] [返回上一页] [打 印] [收 藏]
∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论...]
中国站长下载
中国站长下载

本页只接受PR>=4 IT类站点连接,申请连接,谢谢您们的支持!希望我们的下载站能够真正帮到中国的站长们!
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图
Copyright © 2005-2006 ChinaZhan.Net. All Rights Reserved .