如何使用CSS创建滤镜效果?

html-css08

如何使用CSS创建滤镜效果?,第1张

标签 Filter

Alpha通道属性: Filter :ahpha(opacity=80) 80变量取值范围[1----100]

Blur模糊 4是一个变量

属性:Filter :progid:dximagetransform.microsoft.biur(pixelradius=4,makeshadow=falsh)

Chroma透明色属性:filter:chroma(color=ff6800)ff6800是指去掉ff6800这个颜色

Flip翻转属性:fliter:flipv fliph flipv水平方向 fliph 垂直方向

Mask遮罩属性:filter:mask(color=#8888ff) #8888ff是指使用#8888ff遮罩原始图片

Wave波浪 属性:filter:wave(add=1,freq=4,lightstrength=60,phase=0, strength=6) 这是我在学习CSS的时候自己记的笔记

滤镜效果filter的css样式属性是微软Internet Explorer特有的,未被W3C收入,故而在火狐浏览器下尚未提供支持。但是通过js编码可以部分实现一些滤镜效果,如透明等。

随着浏览器的发展CSS的功能越来越强大,大多数的滤镜效果有类似功能的CSS样式实现了。

对应表:

IE 滤镜  W3C 滤镜

Alpha:设置透明层次. grayscale 灰度

blur:创建高速度移动效果,即模糊效果. sepia 褐色

Chroma:制作专用颜色透明.   saturate 饱和度

DropShadow:创建对象的固定影子. hue-rotate 色相旋转

FlipH:创建水平镜像图片.  invert 反色

FlipV:创建垂直镜像图片.  opacity 透明度

glow:加光辉在附近对象的边外. brightness 亮度

gray:把图片灰度化.  contrast 对比度

invert:反色.blur 模糊

light:创建光源在对象上.  drop-shadow 阴影

mask:创建透明掩膜在对象上.

shadow:创建偏移固定影子.

wave:波纹效果.

Xray:使对象变的像被x光照射一样.

CSS滤镜:Mask属性 Mask属性为对象建立一个覆盖于表面的膜

CSS滤镜:blur属性 假如您用手在一幅还没干透的油画上迅速划过,画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果

CSS滤镜:Chroma属性 Chroma属性可以设置一个对象中指定的颜色为透明色

CSS滤镜:DropShadow属性 DropShadow属性是为了添加对象的阴影效果的

CSS滤镜:FlipH、FlipV属性 Flip是CSS滤镜的翻转属性,FlipH代表水平翻转,FlipV代表垂直翻转

CSS滤镜:Glow属性 当对一个对象使用“Glow”属性后,这个对象的边缘就会产生类似发光的效果

CSS滤镜:Invert属性 Invert属性可以把对象的可视化属性全部翻转,包括色彩、饱和度和亮度值

CSS滤镜:Shadow属性 Shadow属性可以在指定的方向建立物体的投影

CSS滤镜:Wave属性 Wave属性用来把对象按照垂直的波纹样式打乱。

CSS滤镜:Xray属性 这种属性产生的效果就是使对象看上去有一种X光片的感觉

CSS滤镜:alpha属性 alpha是来设置透明度的

CSS滤镜属性详解教程:http://tech.163.com/05/0329/15/1G18AIVD0009158P.html