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浏览器对滤镜支持较好,使用时要考虑访问者浏览器的兼容性。
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滤镜效果,下表是滤镜属性及说明。
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)
这么多参数哇,别着急,这些参数都各有其用,下表介绍这些参数各自的用处。
具体应用效果如下表所示:
注意:由于CSS滤镜只在IE浏览器中能够正常显示,而在其他的浏览器中不能实现。但是对于透明度的设置可以在CSS中使用“opacity:小数”的方式实现,例如上表中第一个效果实现背景半透明的代码可以增加:opacity:0.5,这样在其他的浏览器中(例如Firefox)也可以看到半透明效果。但是这种方式在IE中却不支持,还是要使用“filter:alpha()”的方式实现透明效果。
(2)blur
把Blur滤镜加载到文字上,可产生立体字的效果,加载到图片上,可以产生风吹模糊效果。不仅美化了网页,也为你的网页减轻了分量。先下看一下它的语法。语法:
filter:blur(add=iadd,direction=idirection,strength=istrength)
下表介绍这些参数各自的用处。
具体应用效果如下表所示:
(3)wave
把对象按照垂直的波形样式扭曲,而产生一种特殊的效果。 把wave滤镜加载到文字上,就可得到波形文字的效果。语法:
filter:wave(add=iadd,lightstrength=ilightstrength,strength=istrength,freq=ifreq,phrase=iphrase)
下表介绍这些参数各自的用处。
具体应用效果如下表所示:
(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()
具体应用效果如下表所示:
(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()"
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) |
(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) |
把对象按照垂直的波形样式扭曲,而产生一种特殊的效果。 把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) |
对象中的某个颜色为透明效果
例如: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() |
产生边缘光晕的模糊效果
例如: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()"