- 热门文章:
- · CSS实例:横线样式的输入框
- · 巧用CSS控制鼠标样式变换
- · CSS快速入门
- · 网页技巧之怎样编写CSS
- · 显示/隐藏引出的CSS Bug
- · 利用CSS改善网站可访问性
- · 两种Java容器类List和Set分析
- · Java 2005回顾&2006展望
- · JUnit入门
- · 软件最大的追求是什么?
- · Java实现利用搜索引擎收集网址的程序
- · 开发J2EE应用应遵循的几点原则
上一篇:CSS自定义属性Expression >>
巧用CSS滤镜做图案文字
请先看看以下演示中的图案文字。这可不是图片效果,而是用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。当然你可以将它们改为其他相同的值而不影响效果,注意不要与字体背景色相同即可。
下一篇:CSS实例:横线样式的输入框 >>
相关文章:
- · package 与 import
- · 写Java程序最容易犯的21种错误实例分析
- · JGraph开发经验谈
- · J2ME应用程序内存优化三招
- · 浅析Java多线程编程中的高级技术
- · 一个理解wait()与notify()的例子
- · Java中常见的异常
- · 关于Java栈与堆的思考
- · 浅析Java多线程程序设计机制
- · Java语言入门级的十二大特色详细介绍
- · Java语言入门级的十二大特色详细介绍
- · J2EE相关设计模式讨论
- · 对J2EE项目的一些体会
- · 开发J2EE应用的要领
- · Java线程的深入探讨
- · 浅析Java语言中两种异常的差别
- · 使用设计模式改善程序结构(三)
- · 小结Hibernate的查询方式
- · Struts常见错误汇总
- · JDBC专题介绍(3)
- · JDBC专题介绍(2)
- · JDBC专题介绍(1)
- · java命令行简介
- · 详述:JAVA也能克隆
- · Java多线程程序设计-区别与总结
- · 使用javap深入查看类文件
- · 用Java编写的密码算法类
- · Java/J2EE中文问题终极解决之道
- · Java技术新方向
- · 实战Java多线程编程之不提倡的方法
- · Java学习从入门到精通 4方法篇
- · Java学习从入门到精通 2书籍篇
- · Java学习从入门到精通 3过程篇
- · Java学习从入门到精通 1工具篇
- · 编写一个JAVA的队列类
- · 调用CUI程序的方法
- · 在Eclipse中用SWT设计界面
- · JSP概述
