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

html-css014

火狐下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：filtername（parameters）即 filter:滤镜名（参数)

其中，filter是滤镜选择符；filtername是滤镜的属性名，这里包括alpha、blur、chroma等

多种属性；parameters是属性参数值。属性名及参数值请看下面的《filter属性及属性值》。

具体的应用有两种方法：

1、先定义好CSS ，再在页面中需要的对象上使用预先定义好的CSS，实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了，我们只需填上适合的具体参数即可。

2、直接在支持CSS滤镜效果的HTML控件元素上编写CSS filter代码。

但是filter存在兼容问题。filter是IE专用的，所以IE以外的浏览器将无法正常显示。

下面是代码：仅供参考：

IE中兼容CSS的filter，火狐下不兼容。

.aa{

    position:absolute

    padding:4px

    filter:

        Dropshadow(offx=1,offy=0,color=#ffffff)

        Dropshadow(offx=0,offy=1,color=#ffffff)

        Dropshadow(offx=0,offy=-1,color=#ffffff)

        Dropshadow(offx=-1,offy=0,color=#ffffff)

}

兼容IE和火狐

.aa{

    position:absolute

    padding:4px

    filter:

        Dropshadow(offx=1,offy=0,color=#ffffff)

        Dropshadow(offx=0,offy=1,color=#ffffff)

        Dropshadow(offx=0,offy=-1,color=#ffffff)

        Dropshadow(offx=-1,offy=0,color=#ffffff)

        text-shadow:1px 1px 1px #ffffff

}