CSS 属性篇(十)：filter、mix-blend-mode、background-blend-mode区别

转载至：ofxblog.cn/2019/02/04/…

1、属性介绍

1.一、filter

应用场景：filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜一般用于调整图像，背景和边框的渲染。
做用对象：做用于使用该属性的元素自己
具体应用实例：DEMO

1.二、mix-blend-mode

应用场景：mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
做用对象：做用于使用该属性的元素自己以及直系父元素
具体应用实例：DEMO

1.三、background-blend-mode

应用场景：background-blend-mode CSS属性定义该元素的背景图片，以及背景色如何混合。一般结合background-image属性使用。
做用对象：做用于使用该属性的元素的背景
具体应用实例：DEMO

2、属性区别

2.一、三者的相同点

• 都属于Blend混合效果的“滤镜”(这里所讲的滤镜不单单指filter属性)
• 都用经过某种形式，改变元素的显示效果
• 均可以混合使用，多个属性同时叠加做用于同一个元素
• 其中mix-blend-mode和background-blend-mode更是很是的类似，就连系统可见值几乎都是同样的。

2.二、三者的不一样点

• 做用的对象不一样（参见上文）
• filter和mix-blend-mode | background-blend-mode的系统可见值不一样
  filter有：blur | brightness | contrast | drop-shadow | grayscale | hue-rotate | invert | opacity | saturate | sepia
  mix-blend-mode | background-blend-mode有：normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

3、说明

• filter：
  能够类比为你带着各类各样“有色眼镜”，在这种状况下再去观看被添加filter属性的元素。
• mix-blend-mode：
  能够理解为，在一个像素上同时显示来自两个元素的像素，那么该怎么显示呢？显示什么颜色呢？这就要取决于你的混合模式了。 而这两个元素则分别是被设置了mix-blend-mode属性的元素 以及 其直系父元素。
• background-blend-mode：
  能够理解为，其余地方和mix-blend-mode相似，可是混合的对象不是来自不一样的元素，而是来自同一个元素的不一样背景层。设置该属性，不会影响元素背景之上的元素。

4、参考

混合模式
MDN filter
MDN mix-blend-mode
MDN background-blend-mode