background-blend-mode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

概述

background-blend-mode CSS 属性定义该元素的背景图片,以及背景色如何混合。

混合模式应该按background-image CSS 属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等,它会被截取至相等的数量。

初始值normal
适用元素All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值as specified
动画类型Not animatable

语法

css
/* 单值 */
background-blend-mode: normal;

/* 双值,一个值对应一个背景 */
background-blend-mode: darken, luminosity;

/* 全局值 */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;

<blend-mode>

一个定义混合的模式,可以有多个值,用逗号间隔。

形式定义

初始值normal
适用元素All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值as specified
动画类型Not animatable

形式语法

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

示例

css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
js
document.getElementById("select").onchange = function (event) {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));

规范

Specification
Compositing and Blending Level 2
# background-blend-mode

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-blend-mode

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见