无痕

君心我已知,只恨混浊世。望君能谅解,来日必有时

首页 新随笔 联系 订阅 管理
CSS滤镜效果在网页中的应用
一、CSS滤镜简介
随着网页设计技术的发展,人们已经不满足于原有的一些HTML标记,而是希望能 够为页面添加一些多媒体属性,例如透明效果、渐变的效果等,CSS技术的飞快发展使这些需求成为了现实、从现在开始为大家介绍一个新的CSS扩展部分:CSS滤镜属性(Filter Properties),使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上,例如图片、文本容器、以及其他一些对象。滤镜主要分为视觉滤镜和渐变滤镜,视觉滤镜只可达到静态的特效效果;渐变滤镜是用于图片产生动态效果,但还用到脚本语言控制它的状态;本次在线培训主要讲网页中常用的视觉滤镜效果。
二、滤镜的应用
1.滤镜的使用 和其它CSS的样式定义方式一样,分为外部引用、内部引用和行内引用三种。
2. Filter样式属性允许一次设定多个滤镜效果,也就是说,可以让一个HTML的元件同时拥有多个滤镜的的效果。
3. 如果使用多的滤镜,那么滤镜间要以空格分开,一个滤镜中的若干参数以逗号分隔,Filter和其他的CSS样式则以分号分开。
4. 部分滤镜要有一定的width与height才能显示出结果,如shadow,blur,alpha等。
5. 在有的滤镜中处理图片时,图片必须是透明的效果图,比如:Glow等。
6. 有的滤镜不能应用在图片上,仅对容器有效。
7. 目前仅有IE浏览器对滤镜支持较好,使用时要考虑访问者浏览器的兼容性。
三、CSS滤镜特效
CSS滤镜效果的语法为:
style="filter:滤镜属性(参数1,参数2,参数3...)"
不同的滤镜属性可以呈现出不同的CSS滤镜效果,下表是滤镜属性及说明。
  • 滤镜效果
  • 描述
alpha
设置透明度
blur
设置模糊效果
wave
波纹效果
Chroma
设置指定颜色透明
DropShadow
设置投射阴影
FlipH
水平翻转
FlipV
垂直翻转
glow
为对象的外边界增加光效
gray
把图片灰度化
invert
反色
light
设置灯光投影
mask
设置透明膜
shadow
设置阴影效果
Xray
使对象变的像被x光照射一样
上表中列出了CSS滤镜属性及对应产生的效果,下面在页面中常用的CSS滤镜效果。
四、常用CSS滤镜特效
(1)alpha
alpha用来设置透明度,先下看一下它的语法。语法:
filter:alpha(enabled=bEnabled,opacity=iOpcity,finishOpacity=iFinishOpacity,style=iStyle,startX=iPercent,startY=iPercent,finishX=iPercent,finishY=iPercent)
这么多参数哇,别着急,这些参数都各有其用,下表介绍这些参数各自的用处。
参数 说明
enabled 布尔值:true |false
true:默认值,滤镜激活
flase:滤镜被禁止
opacity 代表透明度程度。范围是从0~100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明
finishOpacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100
style 指定了透明区域的形状特征。
0代表统一形状
1代表线形
2代表放射状
3代表长方形
startX 代表渐变透明效果的开始的X坐标
startY 代表渐变透明效果的开始的Y坐标
finishX 代表渐变透明效果结束的X坐标
finishY 代表渐变透明效果结束的Y坐标
具体应用效果如下表所示:
CSS滤镜实现 代码
透明
映日荷花别样红
文字所在的层背景呈半透明,并且文字在图片的下方,文字所在的层相对上一级的层为绝对定位,关键代码如下:
background-color:#000; color:#FFF;
filter:alpha(opacity=50);
position:absolute; top:98px;
透明 图片的透明度为70,呈放射状显示,代码如下:
filter:alpha(opacity=70,style=2)
透明 区域透明度设置,从(0,0)到(70,100),代码如下:
filter:alpha(opacity=0,finishopacity=100,style=1,startX=0,startY=0,finishX=70,finishY=100)
注意:由于CSS滤镜只在IE浏览器中能够正常显示,而在其他的浏览器中不能实现。但是对于透明度的设置可以在CSS中使用“opacity:小数”的方式实现,例如上表中第一个效果实现背景半透明的代码可以增加:opacity:0.5,这样在其他的浏览器中(例如Firefox)也可以看到半透明效果。但是这种方式在IE中却不支持,还是要使用“filter:alpha()”的方式实现透明效果。
(2)blur
把Blur滤镜加载到文字上,可产生立体字的效果,加载到图片上,可以产生风吹模糊效果。不仅美化了网页,也为你的网页减轻了分量。先下看一下它的语法。语法:
filter:blur(add=iadd,direction=idirection,strength=istrength)
下表介绍这些参数各自的用处。
参数 说明
add 它指定图片是否被改变成模糊效果,模糊效果是按顺时针的方向进行的。
这是一个布尔值:true(默认)或false,也可以是1和0,1表示“是”,0表示“否”。
add=false(或“0”)时Blur滤镜不起作用,取true(或非“0”值)时Blur滤镜起作用
direction 用来设置模糊的方向,其值为0至360度
strength 它代表有多少个像素的宽度成为阴影,也可以简单地理解为阴影的长度。它只能用整数来指定,默认值是5个像素,可以根据实际需要来指定阴影的长度。
具体应用效果如下表所示:
CSS滤镜实现 代码
Blur模糊效果
文字呈模糊状态,关键代码如下:
font-size:60px;color:#ff0000;
filter:blur(add=1,direction=60,strength=10);
font-weight:bold;font-family: 华文行楷
透明 图片模糊方向为45度,阴影长度为10,代码如下:
filter:blur(oadd=1,direction=45,strength=20)
(3)wave
把对象按照垂直的波形样式扭曲,而产生一种特殊的效果。 把wave滤镜加载到文字上,就可得到波形文字的效果。语法:
filter:wave(add=iadd,lightstrength=ilightstrength,strength=istrength,freq=ifreq,phrase=iphrase)
下表介绍这些参数各自的用处。
参数 说明
add 表示是否要把对象按照波形式样扭曲,这是一个布尔值,即“true”和“false”,默认值是“false”(0),也可以修改它的值为“true(1)”
lightstrength 可以对于波纹增强光影的效果。它的参数值范围是从0到100的整数值,0(弱)~100(强)
strength 表示波形的振幅大小,也可以简单的理解为扭曲的程度,单位为像素,数值为正数
freq 设置出现在对象上的波浪数目,以正数设置
phrase 设置正玄波起始波形位置0~100(相当将360度,划分为100份),例如如果值为25那么正弦波就从90度的方向开始。
具体应用效果如下表所示:
CSS滤镜实现 代码
wave波浪效果
文字扭曲,关键代码如下:
font-size:60px;color:#ff0000;
filter:wave(add=0,lightstrength=80,strength=8,freq=3,phrase=60);
font-weight:bold;font-family: 华文行楷
透明 图片扭曲,代码如下:
filter:wave(add=0,lightstrength=70,strength=8,freq=6,phrase=50)
(4)chroma
对象中的某个颜色为透明效果
例如:style= "filter:chroma(color=#ceff9c)"
color:指定对象中要变为透明的颜色
(5)dropshadow
阴影效果
例如:style= "filter:dropshadow(color=pink,offx=-5,offy=-5,positive=1)"
color:设置阴影颜色,以#rrggbb的格式
offx:阴影相对于原始对象的水平位移量,设置值为整数,单位为像素。若水平往右移,则正数;反之为负数
offy:阴影相对于原始对象的垂直位移量,设置值为整数,单位为像素。若垂直往下移,则正数;反之为负数
positive:设置阴影的透明度,0(透明)1(不透明)
(6)FilpH、FilpV
FilpH:水平翻转效果
FilpV:垂直翻转效果
语法:
filter:fliph()
filter:filhv()
具体应用效果如下表所示:
CSS滤镜实现 代码
水平翻转效果
文字水平翻转,关键代码如下:
filter:fliph()
水平翻转效果
文字垂直翻转,关键代码如下:
filter:flipv()
(7)glow
产生边缘光晕的模糊效果
例如:style= "filter:glow(color=yellow,strength=10)"
color:设置边缘光晕的颜色,以#rrggbb的格式,或名称
strength:设置边缘光晕的强度大小,设置值为1~255的整数
(8)gray
灰色,例如:style= "filter: gray"
将对象中的颜色去除,以变成黑白的效果,gray滤镜并无参数
(9)invert
反转,例如:style= "filter: invert"
将颜色的度以及亮度值完全反转,类似于底片效果,invert滤镜并无参数
(10)light
为对象的内容建立光照效果,它可控制多个光源照向一个对象,用以调节亮度、颜色,语法:
filter:light()
light滤镜是使用的所有滤镜中最复杂的,它需要脚本语法配使用,通过调用方法来实现,这就需要用到JavaScript动态滤镜编程,在这里就不细讲了。
(11)mask
掩饰,假面具,设置对象的屏蔽效果,就好象印章一样印出模型的模样
例如:style= "filter: mask(color=#0000ff)"
color:设置屏蔽的颜色,以#rrggbb为格式,或名称
(12)shadow
阴影渐变 除了具备DropShadow的阴影效果外,它还多了阴影渐变的特效
Color:设置阴影的颜色,以#rrggbb为格式,或名称
direction:设置阴影的方向,总单位为360度,0代表垂直向上,并以每45度为一个单位,默认为225度
(13)Xray
使对象变的像被x光照射一样
例如:style="filter: Xray()"
posted on 2012-08-18 10:04  shellcode?  阅读(2121)  评论(0编辑  收藏  举报