巧用CSS滤镜做图案文字
发布时间：2011-04-29 14:06:00
请先看看以下演示中的图案文字。这可不是图片效果，而是用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。当然你可以将它们改为其他相同的值而不影响效果，注意不要与字体背景色相同即可。
0
投稿猜你喜欢
引言今年互联网的就业环境真的好糟糕啊，好多朋友被优化。我们平常在工作中除了撸好代码，跑通项目之外，还要注意内外兼修。内功和招式都得练👌，才能- 使用Requests测试带签名的接口部分业务为了安全需要，需要对接口请求数据做签名校验，一般制定一下规则1、业务方接入系统，需申请业务ID以
- 前言本文介绍如何使用Python制作一个简单的猜数字游戏。游戏规则玩家将猜测一个数字。如果猜测是正确的，玩家赢。如果不正确，程序会提示玩家所
- 好难受，上次发了做游戏的居然没人看，每天为了给你们写啥，老夫心都操碎了~真的是，今天来给大家爬一波短视频网站吧，都是些很养眼的~网站地址在代
- 这个是升级的版本，比较进阶一点的，相对与之前的文件管理系统，数据只是存储到了内存中，而不是存储到硬盘上，我们想让文件存储到硬盘上的话，一个是
- 本文实例为大家分享了python实现支付宝当面付示的具体代码，供大家参考，具体内容如下一、配置信息准备登录蚂蚁金服开放平台：https://
- 〇、前言文件上传/下载接口与普通接口类似，但是有细微的区别。如果需要发送文件到服务器，例如：上传文档、图片、视频等，就需要发送二进制数据，上
- 本文实例讲述了Python基于pygame实现图片代替鼠标移动效果。分享给大家供大家参考，具体如下：想想现在学校pygame有几个钟了，就写
- 实现一个柱状图，这个柱状图的高度在不停的刷新，效果如下：官网是没有动态刷新的示例的，由于需要我查看了其源码，并根据之前示例做出了动态柱状图的
- 1. 项目背景在python 即时网络爬虫项目启动说明中我们讨论一个数字：程序员浪费在调测内容提取规则上的时间，从而我们发起了这个项目，把程
- 什么是异步？含义 ：双方不需要共同的时钟，也就是接收方不知道发送方什么时候发送，所以在发送的信息中就要有提示接收方开始接收的信息，如开始位，
- 本文讲述了Python文件操作类的操作实例，详细代码如下：#!/usr/bin/env python#!/usr/bin/env pytho
- 本文介绍基于Python语言，针对一个文件夹下大量的Excel表格文件，基于其中每一个文件，随机从其中选取一部分数据，并将全部文件中随机获取
- 列表渲染 key 的原理和作用key就是为该节点做身份标识，如果对key绑定index的值，那么很容易出现问题：1.若对数据进行：逆序添加、
- 前言Python中，.whl文件是使用wheel格式存储的一种Python安装包，同时也是一个标准的内置包格式。可以将其看作Python库的
- 本文实例讲述了Python数据结构与算法之完全树与最小堆。分享给大家供大家参考，具体如下：# 完全树 最小堆class CompleteTr
- 【内容】： 最近python挺火，空闲时间看了几个python视频，觉得简单易懂，开发效
- python装饰器在平常的python编程中用到的还是很多的，在本篇文章中我们先来介绍一下python中最常使用的@staticmethod
- 函数getcache，会自动建立需要的缓存。 代码如下:Function getcache(funsname,isreset,is
- Django 中自带了 sitemap框架，用来生成 xml 文件Sitemap(站点地图)是通知搜索引擎页面的地址，页面的重要性，帮助站点
