CSS： 混合模式 background

1.一般建议在使用背景图像的同时提供background-color属性，并且将其设置为和图像主要颜色类似的颜色。这样，如果正在加载页面，或者因为各种原因无法显示背景图像时，页面可以使用这种颜色作为背景色。 2.还有一种情况，考虑到大屏下（如1920*1080或者更大）网站背景图不足以撑满整个显示区域，所以背景图以外的部分要显示背景色，并且背景图边缘部分必须处理妥当保证平滑过渡到背景色，不会有突兀的感觉。

当两个图像叠加在一起的时候，设置上层图像以什么形式与下层图像叠加，例如正片叠底，滤色混合等。

使用混合模式你要有图层的概念，混合时是将上层图层与下层图层进行混合，生成结果色。你需要了解以下三个名词：

background-blend-mode和mix-blend-mode的混合模式种类基本一致，这么多模式其实可以分为 6 大类

background-blend-mode: 设置元素本身多个背景的混合模式（可以是背景色，背景图）；

mix-blend-mode: 设置元素背景或内容与外界的混合模式；

ps: 有些教程介绍mix-blend-mode都是说与直系父元素的内容或背景混合，其实是把范围说小了，只要是元素以外的元素就可以混合，包括兄弟元素，隔代兄弟元素等。

在使用 mix-blend-mode 设置元素背景和外界元素背景的混合模式时，该元素一定要处于图层上方，这个一般不会出错，只要在未设置混合模式前，能看到该元素可以覆盖下方背景就行。

但是使用background-blend-mode时就需要注意：

如果是设置了多个background-image，一定要注意这几个背景的书写顺序，因为书写顺序即代表了图层覆盖顺序，即使你使用了同一个混合模式，修改背景顺序，效果可能就会发生改变，因为图层顺序一变，基色和混合色就变了。background-image设置多个背景时，书写顺序和图层顺序是反的。同理。如果你是 background-image 和 background-color 混搭设置背景，那么background-image势必会被作为混合色，因为css属性的优先级问题，当元素同时设置 background-image 和 background-color，background-image肯定会在上层。

效果图

1. mix-blend-mode: overlay;

2.mix-blend-mode: difference;