background-blend-mode

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Blending modes should be defined in the same order as the background-image property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.

句法

/* One value */
background-blend-mode: normal;
/* Two values, one per background */
background-blend-mode: darken, luminosity;
/* Global values */
background-blend-mode: initial;
background-blend-mode: inherit;
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` .
继承	no
计算值	如指定
动画类型	discrete

形式句法

<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

范例

基本范例

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

Try out different blend modes

<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://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/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 The definition of 'background-blend-mode' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`background-blend-mode`	Chrome 完整支持 35	Edge 完整支持 79	Firefox 完整支持 30	IE 不支持 No	Opera 完整支持 22	Safari 完整支持 8	WebView Android 完整支持 ≤37	Chrome Android 完整支持 35	Firefox Android 完整支持 30	Opera Android 完整支持 22	Safari iOS 完整支持 8	Samsung Internet Android 完整支持 3.0

图例

完整支持
不支持

另请参阅

元数据

最后修改： Oct 15, 2020

CSS
CSS 参考
Compositing and Blending
特性
1. <blend-mode>
2. background-blend-mode
3. isolation
4. mix-blend-mode

在此页

句法

值