CSS3混合模式运用详解-

这次给大家带来CSS3混合模式运用详解，运用CSS3混合模式的注意事项是什么，下面就是实战案例，一起来看一下。 这次给大家带来CSS3混合模式运用详解，运用CSS3混合模式的注意事项是什么，下面就是实战案例，一起来看一下。

一、对于混合模式

熟知PS的人都应当晓得混合模式：

可见，比来的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;           //还原

背面三个酱油气息浓烈，PS中不曾涌现，大家可以疏忽。

要是你想体验各个混合模式的作用体现，您可以狠狠地点击这里：CSS3 mix-blend-mode混合模式Demo

比如说选中叠加，则文字和背面的内容的混合结果就是这样：

需要注意的是，只能是background属性中的配景图片和色彩混合，并且只能在一个background属性中。

CSS3 backgrounds多配景IE9+阅读器就开端支撑了。因而，你想混合多图，就是要逗号，一个一个写在background属性中就可以了，例如本Demo的两个妹子：

.box {
    background: url(mm1.jpg) no-repeat center, url(mm2.jpg) no-repeat center; 
}

信赖看了本案牍例你已经把握了办法，更多出色请关注 百分百源码网 其它相干文章！

举荐浏览：

max-width和min-width的运用技巧

android textinput显示不全怎么解决

以上就是CSS3混合模式运用详解的细致内容，更多请关注 百分百源码网 其它相干文章！