background-blend-mode - CSS（层叠样式表） 编辑

概述

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.
是否是继承属性	否
适用媒体	none
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

Formal syntax:  <blend-mode>#
where 
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

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

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

background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

值

<blend-mode>

一个<blend-mode>定义混合的模式，可以有多个值，用逗号间隔。

示例

<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('https://www.wenjiangs.com/wp-content/uploads/2020/mozilla/br.png'),url('https://www.wenjiangs.com/wp-content/uploads/2020/mozilla/tr.png');
    background-blend-mode: screen;
}

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

规范

规范	状态	备注
Compositing and Blending Level 1 background-blend-mode	Candidate Recommendation	首次定义

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	35	30.0 (30.0)	未实现	22	7.1

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	未实现	30.0 (30.0)	未实现	22	iOS 8

参见

• <blend-mode>
• mix-blend-mode