CSS滤镜在网页设计中的应用

摘要：介绍了CSS滤镜的语法。对几种常用CSS滤镜的主要属性进行了分析，并给出相应实例论述。CSS滤镜可以像图像软件一样处理页面中的文字和图像，使网页变得更加生动。控制滤镜的参数来产生动态效果，使网页变得更加生动。

关键词：Alpha Dropshadow Shadow

一提起滤镜，大家都会想起Adobe公司的Photoshop软件，滤镜在Photoshop中具有非常神奇的作用，一般都按照分类放置在菜单中，使用时只需从该菜单中执行这项命令即可达到美妙的效果。但是真正用起来却很难做到恰到好处。因为Photoshop里的滤镜除了平常的美术功底之外，通常需要同通道、图层等联合使用，需要用户对滤镜熟悉的操控，甚至需要具有很丰富的想象力。

1 CSS滤镜的概念

滤镜（filter）是CSS技术的一种应用，它可以用来改变图形和文字的外观，以增加图形的视觉效果。滤镜分为视觉滤镜visualfilters和转换滤镜transitionfilters两大类。视觉滤镜只可以达到静态的特效效果，只需在网页内使用CSS的定义语法，即可将此滤镜效果加到网页内。转换滤镜是用于两个画面进行转换时所使用的特效，将产生动态效果，除了在网页中利用CSS的定义语法外，还必须配合script语言，及事件的概念，才能自如地使用转换滤镜，产生绚丽的效果。

2 滤镜的格式

滤镜不是一种软件，只是CSS的一种扩展功能，因此使用时需要在CSS样式表里添加特定的参数，然后再对对象应用设置好的CSS样式，从而让滤镜效果得以实现。滤镜的具体类别很多，但是大部分格式是相同的。具体格式为：filter：；滤镜名称（参数1=，参数2=……）

3 滤镜的具体应用

3.1 Alpha滤镜 ①格式：filter：Alpha（Opacity=？，FinishOpacity=？，Style=？，StartX=？，StartY=？，FinishX=？，Fi-nishY=？）。②作用：用来设置对象的透明度。③参数详解：透明度程度、可选的参数、透明区域的形状特征、渐变透明效果的开始坐标、渐变透明效果的结束坐标。④操作过程：在网页中插入图片，如图1所示，用于效果对比；建立sty1的样式，代码如下：

■。

代码效果如图2所示：

■

图1 图2

3.2 Dropshadow滤镜 ①格式：filter：DropShadow（Color=？，OffX=？，OffY=-？，Posit-ive=？）。②作用：用来添加阴影效果。③参数详解：分别代表：指定阴影的颜色、相对于元素在水平方向偏移量、相对于元素在垂直方向偏移量、布尔值。④操作过程：建立做sty2的样式，代码如下：■。

代码效果如图3所示：

■

3.3 Shadow滤镜 ①格式：filter：Shadow（Color=？，Direct-ion=？）②作用：用来添加阴影效果。③参数详解：指定阴影的颜色和设置投影的方向。④操作过程：建立sty3的样式，代码如下：

■。

代码效果如图4所示。

3.4 其余的各类滤镜 ①BlendTrans：图像之间的淡入和淡出的效果。格式：BlendTrans（Duration=？）。参数代表淡入或淡出的时间。②Blru：建立模糊效果。格式：Blur（Add=？，Direction=？，Strength=？）。参数分别代表：是否单方向模糊、设置模糊的方向、代表模糊的象素值。③Chroma：把指定的颜色设置为透明。格式：Chroma（Color=？）。参数代表透明的颜色。④FlipH：将元素水转。⑤FlipV：将元素垂直反转。⑥Glow：建立外发光效果。格式：Glow（Color=？，Strength=？）参数代表指定发光的颜色和代表光的强度。⑦Gray：去掉图像的色彩，显示为黑白图象。⑧Invert：反转图像的颜色，产生类似底片的效果。⑨Light：放置光源的效果，可以用来模拟光源在物体上的投影效果。⑩.Mask：建立透明遮罩。格式：Mask（Color=？）。参数是对底色进行设置。■Reveal Trans：建立切换效果。格式：Reveal Trans（Duration=？，Transition=？）。参数分别代表：代表切换时间、切换方式。■Wave：波纹效果。格式：Wave（Add=？，Freq=？，Light Strength=？，Phase=？，Stre-

ngth=？）。参数分别代表：是否显示原对象、波动的个数、波浪效果的光照强度、波浪的起始相角和波浪摇摆的幅度。■Xray：显现图片的轮廓，X光片效果。

4 结束语

滤镜的使用大大减少了网页设计的时间，增强了网页的显示效果，设计者可以通过滤镜对网页中的元素进行精确化控制，从而达到满意的效果。

参考文献：

[1]杨森香.网页设计案例教程[M].北京出版社，2010.

[2]周文化，css滤镜在网页中的使用[J].常州轻工职业学院学报，1999（1）29-31.

[3]刘敏娜.探讨XHTML设计标准下CSS+DIV布局技术[J].价值工程，2012（06）.

作者简介：刘晓荣（1980-），女，甘肃人，讲师，主要从事计算机教学工作。