path: root/files/zh-cn/web/css/blend-mode/index.html

---
title: <blend-mode>
slug: Web/CSS/blend-mode
tags:
  - CSS
  - CSS 参考
  - CSS 合成
  - CSS 混合模式
  - 参考
  - 混合模式
  - 颜色
translation_of: Web/CSS/blend-mode
---
<div>{{CSSRef}}</div>

<p><strong><code>&lt;blend-mode&gt;</code></strong> 是一种 <a href="/zh-CN/docs/Web/CSS">CSS</a> <a href="/zh-CN/docs/Web/CSS/CSS_Types">数据类型</a>，用于描述当元素重叠时，颜色应当如何呈现。它被用于 {{cssxref("background-blend-mode")}} 和 {{cssxref("mix-blend-mode")}} 属性。</p>

<p>当层重叠时，混合模式是计算像素最终颜色值的方法，每种混合模式采用前景和背景的颜色值，执行其计算并返回最终的颜色值。最终的可见层是对混合层中的每个重叠像素执行混合模式计算的结果。</p>

<h2 id="语法">语法</h2>

<p><code>&lt;blend-mode&gt;</code> 数据类型被定义为下列关键词中的任意一个。</p>

<h3 id="属性值">属性值</h3>

<dl>
 <dt><code><a id="normal" name="normal">normal</a></code></dt>
 <dd>
 <p>最终颜色永远是顶层颜色，无论底层颜色是什么。<br>
  其效果类似于两张不透明的纸重叠（overlapping）在一起。</p>

 <div id="normal_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('normal_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="multiply" name="multiply">multiply</a></code></dt>
 <dd>
 <p>最终颜色为顶层颜色与底层颜色相乘的结果。<br>
  如果叠加黑色层，则最终层必为黑色层，叠加白色层不会造成变化。<br>
  其效果类似于在透明薄膜上重叠印刷的两个图像。</p>

 <div id="multiply_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('multiply_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="screen" name="screen">screen</a></code></dt>
 <dd>
 <p>最终的颜色是<u>反转顶层颜色和底层颜色，将反转后的两个颜色相乘，再反转相加得到的和</u>得到的结果。<br>
  黑色层不会造成变化，白色层导致白色最终层。<br>
  其效果类似于（被投影仪）投射到投影屏幕上的两个图像。</p>

 <div id="screen_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('screen_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="overlay" name="overlay">overlay</a></code></dt>
 <dd>
 <p>如果底层颜色比顶层颜色深，则最终颜色是 <code>multiply</code> 的结果，如果底层颜色比顶层颜色浅，则最终颜色是 <code>screen</code> 的结果。<br>
  此混合模式相当于顶层与底层互换后的 <code>hard-light</code>。</p>

 <div id="overlay_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('overlay_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="darken" name="darken">darken</a></code></dt>
 <dd>
 <p>最终颜色是由每个颜色通道下，顶底两层颜色中的最暗值所组成的颜色。</p>

 <div id="darken_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('darken_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="lighten" name="lighten">lighten</a></code></dt>
 <dd>
 <p>最终颜色是每个颜色通道下，顶底两层颜色中的最亮值所组成的颜色。</p>

 <div id="lighten_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('lighten_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="color-dodge" name="color-dodge">color-dodge</a></code></dt>
 <dd>
 <p>最终颜色是将底部颜色除以顶部颜色的反色的结果。<br>
  黑色前景不会造成变化。前景如果是背景的反色，会得到白色（fully lit color，完全亮起的颜色，应当为白色）。<br>
  此混合模式类似于 <code>screen</code>，但是，前景只需要和背景的反色一样亮，最终图像就会变为全白。</p>

 <div id="color-dodge_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('color-dodge_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="color-burn" name="color-burn">color-burn</a></code></dt>
 <dd>
 <p>最终颜色是<u>反转底部颜色，将反转后的值除以顶部颜色，再反转除以后的值</u>得到的结果。<br>
  白色的前景不会导致变化，前景如果是背景的反色，会得到黑色。<br>
  此混合模式类似于 <code>multiply</code>，但是，前景只需要和背景的反色一样暗，最终图像就会变为全黑。</p>

 <div id="color-burn_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('color-burn_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="hard-light" name="hard-light">hard-light</a></code></dt>
 <dd>
 <p>如果顶层颜色比底层颜色深，则最终颜色是 <code>multiply</code> 的结果，如果顶层颜色比底层颜色浅，则最终颜色是 <code>screen</code> 的结果。<br>
  此混合模式相当于顶层与底层互换后的 <code>overlay</code>。<br>
  其效果类似于在背景层上（用前景层）打出一片<em>刺眼</em>的聚光灯。</p>

 <div id="hard-light_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('hard-light_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="soft-light" name="soft-light">soft-light</a></code></dt>
 <dd>
 <p>最终颜色类似于 <code>hard-light</code> 的结果，但更加柔和一些。<br>
  此混合模式的表现类似 <code>hard-light</code>。<br>
  其效果类似于在背景层上（用前景层）打出一片<em>发散</em>的聚光灯。</p>

 <div id="soft-light_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('soft-light_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="difference" name="difference">difference</a></code></dt>
 <dd>
 <p>最终颜色是 两种颜色中较浅的颜色 减去 两种颜色中较深的颜色 得到的结果。<br>
  黑色层不会造成变化，而白色层会反转另一层的颜色。</p>

 <div id="difference_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('difference_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="exclusion" name="exclusion">exclusion</a></code></dt>
 <dd>
 <p>最终颜色类似于 <code>difference</code>，但对比度更低一些。<br>
  和 <code>difference</code> 相同，黑色层不会造成变化，而而白色层会反转另一层的颜色。</p>

 <div id="exclusion_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('exclusion_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="hue" name="hue">hue</a></code></dt>
 <dd>
 <p>最终颜色由顶部颜色的<em>色调</em>和底部颜色的<em>饱和度</em>与<em>亮度</em>组成。</p>

 <div id="hue_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('hue_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="saturation" name="saturation">saturation</a></code></dt>
 <dd>
 <p>最终颜色由顶部颜色的<em>色调</em>和底部颜色的<em>饱和度</em>与<em>发光度</em>组成。<br>
  饱和度为零的纯灰色背景层不会造成变化。</p>

 <div id="saturation_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('saturation_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="color" name="color">color</a></code></dt>
 <dd>
 <p>最终颜色由顶部颜色的<em>色调</em>与<em>饱和度</em>和底部颜色的<em>亮度</em>组成。<br>
  此效果保留了灰度级别，可用于为前景着色。（The effect preserves gray levels and can be used to colorize the foreground.）</p>

 <div id="color_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('color_example', "300", "300") }}</p>
 </dd>
 <dt><code><a id="luminosity" name="luminosity">luminosity</a></code></dt>
 <dd>
 <p>最终颜色由顶部颜色的亮度和底部颜色的色调和饱和度组成。<br>
  此混合模式相当于顶层与底层互换后的 <code>color</code>。</p>

 <div id="luminosity_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#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;
}</pre>
 </div>

 <p>{{ EmbedLiveSample('luminosity_example', "300", "300") }}</p>
 </div>
 </dd>
</dl>

<h2 id="混合模式的插值">混合模式的插值</h2>

<p>混合模式之间的更改暂无插值。任何变化都会立即发生。</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;') }}</td>
   <td>{{ Spec2('Compositing') }}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("css.types.blend-mode")}}</p>

<h2 id="另请参阅">另请参阅</h2>

<ul>
 <li>使用此类型的属性值：{{cssxref("background-blend-mode")}} 和 {{cssxref("mix-blend-mode")}}</li>
</ul>

<p>其他网站上对各种混合模式的说明与介绍：</p>

<ul>
 <li>Wikipedia 上的<a href="http://en.wikipedia.org/wiki/Blend_modes">混合模式</a>（暂无中文）</li>
 <li>Adobe 提供的 <a href="https://helpx.adobe.com/photoshop/using/blending-modes.html">Blending modes in Adobe Photoshop</a>（英文）</li>
</ul>