全国服务热线:4008-888-888

技术知识

CSS3混和方式mix

1、有关混和方式

熟习PS的人都应当了解混和方式:

SVG和Canvas中也是有混和方式,实质上全是1样的。

下面是1些普遍的混和方式的优化算法:

维基上也是有表明。有兴趣爱好能够掌握下。

本文內容则简易详细介绍CSS3出現了两个与混和方式相关的特性,mix-blend-mode和background-blend-mode.

2、CSS3 mix-blend-mode
 

最先,要了解”blend-mode”便是混和方式的意思。那mix, 恩,我也不知道道为何取名为mix, 将会是该特性不但能够功效于HTML,还能够功效于SVG,果断叫mix1起捋过来。该CSS特性功效是让元素內容和这个元素的情况和下面的元素产生“混和”。

适配性以下:

可见,近期的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;           //还原

后边3个酱油气场浓厚,PS中未曾出現,大伙儿能够疏忽。

假如你想体验各个混和方式的功效主要表现,您能够狠狠地址击这里:CSS3 mix-blend-mode混和方式Demo

比如说挑选叠加,则文本和后边的內容的混和实际效果便是这样:

mix-blend-mode为大家完成1些文本殊效又出示了更宽阔的思路了。

3、CSS3 background-blend-mode

background-blend-mode这个要更好了解1点,情况的混和方式。能够是情况照片见的混和,还可以是情况照片和情况色的混和。

适配性以下:

适用的特性值跟上面1样,就不反复展现。

假如你想体验各个混和方式的功效主要表现,您能够狠狠地址击这里:CSS3 background-blend-mode混和方式Demo

比如,挑选1个普遍的multiply正片叠底,結果两个妹子合体了:

必须留意的是,只能是background特性中的情况照片和色调混和,并且只能在1个background特性中。

CSS3 backgrounds多情况IE9+访问器就刚开始适用了。因而,你想混和多图,便是要逗号,1个1个写在background特性中便可以了,比如本Demo的两个妹子:

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

总结

以上所述是网编给大伙儿详细介绍的CSS3混和方式mix-blend-mode/background-blend-mode简介,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服