CSS滤镜

最新推荐文章于 2024-07-19 13:44:06 发布

congsong6244

最新推荐文章于 2024-07-19 13:44:06 发布

阅读量83

点赞数

记录平时看到的一些零零碎碎的东西，仅此而已[@more@]

1、CSS滤镜技术

从IE4.0开始，浏览器开始支持多媒体滤镜特效，允许使用很少的代码就能对文本和图片进行模糊处理。彩色投影，火焰效果，图片倒置，色彩渐变，产生风吹和光晕效果等。当把滤镜和渐变结合运用到Script脚本程序中，就可以建立一个动态交互的网页。

CSS通过Filter属性使用滤镜功能，并且可以进行内部引（在

标记符内）、局部引用（在中的标记符中）和外部引用（CSS文件）。Filter属性允许多个滤镜效果叠加。

滤镜属性只能作用在HTML控件元素上，即在页面上定义了矩阵空间的标记。如

、、

滤镜属性也具有继承性，但如果一个已定位的元素嵌入到一个未定位的元素中时，其滤镜效果就会被忽略。例如：一个没有定位的

元素中嵌入一个带滤镜的。则的滤镜效果将显示不出来。此外，元素和对象如果包含，，，，，

，

到

、、等元素时，滤镜属性也将无效。

在使用滤镜时要注意，若使用多个滤镜，则每个滤镜之间用空格分隔开；一个滤镜中的若干个参数用逗号分隔；Filter属性和其它样式属性并用时以分号分隔。

2、ALPHA滤镜

该属性可将标记元素与背景相混合，产生透明渐变的效果，还可以通过数值来控制透明度。其使用方法如下：

选择器{FILTER：alpha（opacity=数，finishopacity=数，style=数，startX=数,startY=数，finishX=数，finishY=数）}

其中，opacity用来设定不透明度，取值为0到100。0表示完全透明，100表示不透明。

finishopacity在和opacity共同使用时，可以制作出透明渐进的效果，其取值也是从0到100。

style主要用来指定渐进的显示形状，取值为0到3。0表示无渐进，1表示直线渐进，2代表圆形渐进，3代表矩形辐射。startX代表渐进开始的X坐标；startY代表渐进开始的Y坐标；finishX 代表渐进结束的X坐标。finishY代表渐进结束的Y坐标

下列代码是ALPHA属性使用的例子。

原始图

style=0

style=1

style=2

style=3

3、BLUR滤镜

BLUR属性用于使元素产生模糊效果，运用得当可以产生高速移动的动感效果。BLUR的使用方法如下：

选择器{FILTER：blur（add=数值，direction=数值，strength=数值）}

其中，add的值用来设置是否要在已经应用了blur滤镜的元素上显示原来的对象。0表示不显示，非0表示要显示。缺省时默认值为1。

direction 用来设定模糊方向。模糊的效果是按顺时针方向起作用的，0表示零度，代表向上方向。45表示右上，90表示向右，135表示右下，180表示向下。225表示左下，270表示向左，315表示左上。

strength用来指定模糊半径大小，单位是象素，默认值为5，取值范围为自然数，该取值决定了模糊效果的延伸范围。

下面的代码用BLUR滤镜模拟出图象移动效果。

原图

width="200" height="84"> 应用了Blur滤镜后

下面的代码则将模糊效果应用于文字。

add=1

SQL Server

add=0

SQL Server

4、CHROMA滤镜

该滤镜可设置对象中的某种颜色为透明色，在标记符中将该属性应用于对象时，则对象内容中的指定颜色就变为透明的，即不可见了。其使用语法如下：

选择器{FILTER：chroma（color=颜色值）}

下面的代码将chroma滤镜用于文字，显示时指定的一般文字不可见，但拖动鼠标选择到原来文字所在的位置时，则可以看到消失的文字。

chroma滤镜效果

需要指出的是，这种透明色滤镜对于某些图片格式不适用的。例如：JPEG格式的图片是一种已经减色和压缩处理的图片，所以要设置其中某种颜色透明十分困难。此外，每张图片只能指定一种透明色，对于已设置另外的色为透明色的GIF等格式的图片，再设置透明色时，原先透明而不可见的颜色会重新显示出来。

5、Dropshadow滤镜

该滤镜的作用是使元素产生下落阴影。其语法结构如下：

选择器{Filter：Dropshadow（color=颜色，offx=数值，offy=数值，Positive=数值）}

其中：offx用于指定阴影水平方向偏移量；offy用于指定阴影垂直方向偏移量；Positive用于指定阴影透明程度，0值表示透明，无阴影，非0表示阴影的效果。例如：

Dropshadow滤镜

6、FlipH 和FlipV 滤镜

FlipH 是水平翻转对象的滤镜，FlipV 是垂直翻转对象的滤镜。这2个滤镜不带参数，直接使用即可，使用格式如下：

选择器{Fliter：FlipH（）}

选择器{Fliter：FlipV（）}

下列代码表示了这两个滤镜的使用。

原图片

图片水平翻转

图片垂直翻转

正常的文字

文字水平翻转

文字垂直翻转

7、GLOW滤镜

该滤镜可以使对象的轮廓产生一种柔和的边框或光晕，并可产生象火一样淡化的效果。这种效果的颜色和强度可通过数值进行定义，其使用语法如下：

选择器{Filter：Glow（color=颜色值，strength=数值）}

其中：color的值用来指定晕圈效果的颜色；strength值用来指定晕圈的强度范围，其值为1到255，数值越大效果越强。

GLOW滤镜作用于文字时，效果特别明显。对于一般的图片只是在其边缘加上光晕，而作用于具有透明背景的GIF格式图片时，将忽视背景，直接将效果作用在图象的主体上。

8、Shadow滤镜

该滤镜作用与Dropshadow类似，也能使对象产生阴影效果，不同的是shadow可产生渐进效果，使阴影更显真实。其语法结构如下：

选择器{Filter：shadow（color=颜色值，Direction=数值）}

其中，Color用于设定阴影颜色；Direction用于设定投影方向，取值为0即零度（表示向上方向），45为右上，90为右，135为右下，180为下方，225为左下方，270为左方，315为左上方。

Shadow滤镜演示

src= "004.gif" width="200" height="150">

下图无滤镜

9、WAVE 滤镜

该滤镜可使对象产生波纹变形，其语法结构如下：

选择器{Filter：wave（add=数，freq=数，lightstrength=数，phase=数，strength=数）}

其中，add值用于设定是否显示对象，0值表示不显示，非0表示显示；freq值用来设定波动个数；lightstrength用于设置波纹效果光照强度，取值为0到100，0表示最弱；phase值用于设定波纹的起始相角，取值为0到100，25为90度，50为180度。

原图

波动数为二

波动数为三

波动文字IHJLTN

10、light滤镜

该属性可模仿光源投射效果，它可控制多个光源照向一个元素对象，用以调节亮度、颜色。

其使用语法结构如下：

选择器{Filter：light（）}

light滤镜的使用是所有滤镜中最复杂的，它需要用脚本语言配合使用。

除了以上介绍的几种滤镜外，CSS中还有诸如xray、mask、Grag、Invet、BlendTrans、RevealTrans等滤镜，在此不再叙述。总之，视觉滤镜效果是CSS中最引入注目的功能之一。运用它可以实现以往只能在专业图形处理软件中才能达的效果。如果再与脚本软件结合，则可达到更生动的效果。

下面是使用Alpha和Blow滤镜在图片上叠加文字的综合应用实例。文字“蓝天白云、鱼翔浅底”采用半透明色使它浮在画面上。

蓝天白云、鱼翔浅底

万类霜天竞自由