css3 mix-blend-mode 还能用么

html-css024

css3 mix-blend-mode 还能用么,第1张

可以看到CSS3 mix-blend-mode chrome firefox 支持良好，都不用私有前缀

mix-blend-mode: normal          //正常

mix-blend-mode: multiply        //正片叠底

mix-blend-mode: screen          //滤色

mix-blend-mode: overlay         //叠加

mix-blend-mode: darken          //变暗

mix-blend-mode: lighten         //变亮

mix-blend-mode: color-dodge     //颜色减淡

mix-blend-mode: color-burn      //颜色加深

mix-blend-mode: hard-light      //强光

mix-blend-mode: soft-light      //柔光

mix-blend-mode: difference      //差值

mix-blend-mode: exclusion       //排除

mix-blend-mode: hue             //色相

mix-blend-mode: saturation      //饱和度

mix-blend-mode: color           //颜色

mix-blend-mode: luminosity      //亮度

mix-blend-mode: initial         //初始

mix-blend-mode: inherit         //继承

mix-blend-mode: unset           //复原

如果想改变css背景图片，一般的做法只能使用css滤镜；

css滤镜主要包括：

Speia滤镜     灰度图滤镜     高斯模糊滤镜     反色滤镜     饱和度滤镜  

对比度滤镜    亮度滤镜        色相旋转滤镜      阴影滤镜

css滤镜在浏览器兼容是比较坑爹的问题，ie浏览器有自己一套滤镜filter家族，基本所有ie内核浏览器都支持，ff和Chrome，opera则主要使用css3的滤镜，这些浏览器在后期版本支持css3的滤镜（目前版本基本都支持html5和css3），通过滤镜改变背景图的颜色和效果，当然这些滤镜主要是为了效果而产生，颜色只是固定的几种效果；了解更多可以参考：http://www.cnblogs.com/fsjohnhuang/p/4127888.html

个别时候，css滤镜还需要结合js使用，才能到达必要效果，其实一般背景图片都是用透明度的css来设置它的颜色度；

透明度css列子：

transparent_class {

filter:alpha(opacity=50)

-moz-opacity:0.5

-khtml-opacity: 0.5

opacity: 0.5

}