background-blend-mode

background-blend-mode 属性定义了元素的 background-image 如何与其 background-color 混合。

.container {
  background-image: url('image.jpg');
  background-color: red;
  background-blend-mode: screen;
}

在上面的演示中，左侧的默认 background-image 没有设置混合模式，因此图像会覆盖 background-color。 然而，在右侧，混合模式修改了 background-image 与下面的红色 background-color 混合。 但请注意，文本颜色 未 受此附加属性的影响。

值

• initial：默认值，无混合。
• inherit：继承父元素的混合模式。
• <blend-mode>：一个值，将根据其 background-color 更改 background-image。

值可以设置为以下任何值（在下面的演示中，background-color 为红色）

链接多个混合模式

每个背景层只能有一个混合模式，但是如果我们使用多个线性渐变，那么每个渐变都可以有自己的混合模式，这会带来有趣的显示效果。

这是通过按您想要影响的背景层顺序列出这些值来实现的。

.container {
  background: 
    linear-gradient(purple 0%, red 90%), 
    linear-gradient(to right, purple 0%, yellow 90%), 
    url('image.jpg') 30px,
    url('image.jpg') 20px;
  background-blend-mode: screen, difference, lighten;
}

第一个线性渐变具有 screen 混合模式，然后是第二个线性渐变，其具有 difference 混合模式，以及第一个背景图像，其应用了 lighten 混合模式。

演示

这是一个工作示例，说明这些值根据 background-color 的解释方式。

浏览器支持

更多信息

相关属性