<blend-mode>

在此页

句法
描述
范例
规范
浏览器兼容性
另请参阅
相关话题

<blend-mode> CSS data type describes how colors should appear when elements overlap. It is used in the background-blend-mode and mix-blend-mode 特性。

句法

<blend-mode> data type is defined using a keyword value chosen from the list below.

值

normal

The final color is the top color, regardless of what the bottom color is.
The effect is like two opaque pieces of paper overlapping.

<div id="div"></div>

#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: normal;
}

multiply

The final color is the result of multiplying the top and bottom colors.
A black layer leads to a black final layer, and a white layer leads to no change.
The effect is like two images printed on transparent film overlapping.

<div id="div"></div>

#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: multiply;
}

screen

The final color is the result of inverting the colors, multiplying them, and inverting that value.
A black layer leads to no change, and a white layer leads to a white final layer.
The effect is like two images shone onto a projection screen.

<div id="div"></div>

#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;
}

overlay

The final color is the result of


multiply

if the bottom color is darker, or


screen

if the bottom color is lighter.
This blend mode is equivalent to


hard-light

but with the layers swapped.

<div id="div"></div>

#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: overlay;
}

darken

The final color is composed of the darkest values of each color channel.

<div id="div"></div>

#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: darken;
}

lighten

The final color is composed of the lightest values of each color channel.

<div id="div"></div>

#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: lighten;
}

color-dodge

The final color is the result of dividing the bottom color by the inverse of the top color.
A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color.
This blend mode is similar to screen , but the foreground need only be as light as the inverse of the backdrop to create a fully lit color.

<div id="div"></div>

#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: color-dodge;
}

color-burn

The final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.
A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image.
This blend mode is similar to multiply , but the foreground need only be as dark as the inverse of the backdrop to make the final image black.

<div id="div"></div>

#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: color-burn;
}

hard-light

The final color is the result of multiply if the top color is darker, or screen if the top color is lighter.
This blend mode is equivalent to overlay but with the layers swapped.
The effect is similar to shining a harsh spotlight on the backdrop.

<div id="div"></div>

#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: hard-light;
}

soft-light

The final color is similar to hard-light , but softer.
This blend mode behaves similar to hard-light .
The effect is similar to shining a diffused spotlight on the backdrop .

<div id="div"></div>

#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: soft-light;
}

difference

The final color is the result of subtracting the darker of the two colors from the lighter one.
A black layer has no effect, while a white layer inverts the other layer's color.

<div id="div"></div>

#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: difference;
}

exclusion

The final color is similar to difference , but with less contrast.
As with difference , a black layer has no effect, while a white layer inverts the other layer's color.

<div id="div"></div>

#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: exclusion;
}

hue

The final color has the hue of the top color, while using the saturation and luminosity of the bottom color.

<div id="div"></div>

#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: hue;
}

saturation

The final color has the saturation of the top color, while using the hue and luminosity of the bottom color.
A pure gray backdrop, having no saturation, will have no effect.

<div id="div"></div>

#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: saturation;
}

color

The final color has the hue and saturation of the top color, while using the luminosity of the bottom color.
The effect preserves gray levels and can be used to colorize the foreground.

<div id="div"></div>

#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: color;
}

luminosity

The final color has the luminosity of the top color, while using the hue and saturation of the bottom color.
This blend mode is equivalent to color , but with the layers swapped.

<div id="div"></div>

#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: luminosity;
}

描述

For each pixel among the layers to which it is applied, a blend mode takes the colors of the foreground and the background, perfoms a calculation on them, and returns a new color value.

Changes between blend modes are not interpolated. Any change occurs immediately.

范例

Blend mode comparison

In the following example, we have a <div> with two background images set on it — a Firefox logo on top of a linear gradient. Below it we have a provided a <select> menu that allows you to change the background-blend-mode applied to the <div> , allowing you to compare the different blend mode effects.

HTML

<div></div>
<p>Choose a blend-mode:</p>
<select>
  <option selected>normal</option>
  <option>multiply</option>
  <option>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>

CSS

div {
  width: 300px;
  height: 300px;
  background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center,
  linear-gradient(to bottom, blue, orange);
}

JavaScript

const selectElem = document.querySelector('select');
const divElem = document.querySelector('div');
selectElem.addEventListener('change', () => {
  divElem.style.backgroundBlendMode = selectElem.value;
});

结果

规范

规范	状态	注释
Compositing and Blending Level 1 The definition of '<blend-mode>' in that specification.	候选推荐	初始定义。

浏览器兼容性

The compatibility table on 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
`<blend-mode>`	Chrome 完整支持 35	Edge 完整支持 79	Firefox 完整支持 30	IE 不支持 No	Opera 完整支持 22	Safari 完整支持 8	WebView Android 完整支持 59	Chrome Android 完整支持 59	Firefox Android 完整支持 54	Opera Android 完整支持 22	Safari iOS 完整支持 8	Samsung Internet Android 完整支持 7.0

图例

完整支持
不支持

另请参阅

使用此数据类型的特性： background-blend-mode , mix-blend-mode

Description to various blend modes on other website:

Blend modes on Wikipedia
Blending modes in Adobe Photoshop by Adobe

元数据

最后修改： Jul 30, 2020

CSS
CSS 参考
Compositing and Blending
CSS Types
特性
1. <angle-percentage>
2. <angle>
3. <basic-shape>
4. <blend-mode>
5. <custom-ident>
6. <dimension>
7. <frequency-percentage>
8. <frequency>
9. <gradient>
10. <image>
11. <integer>
12. <length-percentage>
13. <length>
14. <number>
15. <percentage>
16. <ratio>
17. <resolution>
18. <shape>
19. <string>
20. <time-percentage>
21. <time>
22. <transform-function>
23. <url>
24. background-blend-mode
25. color
26. flex
27. ident
28. isolation
29. mix-blend-mode
30. position

在此页

句法

值

描述

范例

Blend mode comparison

HTML

CSS

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

相关话题