background-blend-mode

background-blend-mode CSS 属性设置元素的背景图像如何彼此混合以及如何与元素的背景颜色混合。

试试看

混合模式应按与 background-image 属性相同的顺序定义。如果混合模式和背景图像列表的长度不相等，则会重复和/或截断，直到长度匹配。

语法

css

/* One value */
background-blend-mode: normal;

/* Two values, one per background */
background-blend-mode: darken, luminosity;

/* Global values */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;

值

<混合模式>: 要应用的混合模式。可以有多个值，用逗号隔开。

正式定义

初始值	`normal`
应用于	所有元素。在 SVG 中，它应用于容器元素、图形元素和引用图形的元素。它也应用于 `::first-letter` 和 `::first-line`。
继承	否
计算值	如指定
动画类型	不可动画

正式语法

background-blend-mode = 
  <mix-blend-mode>#

示例

基本示例

css

.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}

尝试不同的混合模式

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}

document.getElementById("select").onchange = (event) => {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));

规范

规范
合成和混合级别 2 # background-blend-mode

浏览器兼容性

BCD 表格仅在浏览器中加载