火狐下css滤镜效果怎么实现

html-css016

火狐下css滤镜效果怎么实现,第1张

滤镜效果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光照射一样.

标签 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的时候自己记的笔记