2、css滤镜主要包括:
Speia滤镜 灰度图滤镜 高斯模糊滤镜 反色滤镜 饱和度滤镜
对比度滤镜亮度滤镜色相旋转滤镜 阴影滤镜
3、css滤镜在浏览器兼容是比较坑爹的问题,ie浏览器有自己一套滤镜filter家族,基本所有ie内核浏览器都支持,ff和Chrome,opera则主要使用css3的滤镜,这些浏览器在后期版本支持css3的滤镜(目前版本基本都支持html5和css3),通过滤镜改变背景图的颜色和效果,当然这些滤镜主要是为了效果而产生,颜色只是固定的几种效果。
4、个别时候,css滤镜还需要结合js使用,才能到达必要效果,其实一般背景图片都是用透明度的css来设置它的颜色度;
透明度css列子:
transparent_class {
filter:alpha(opacity=50)
-moz-opacity:0.5
-khtml-opacity: 0.5
opacity: 0.5
}
滤镜效果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光照射一样.