<blend-mode>

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

<blend-mode> CSS 資料型別描述了當元素重疊時顏色應如何顯示。它用於 background-blend-mode 和 mix-blend-mode 屬性中。

語法

<blend-mode> 資料型別使用從以下列表中選擇的關鍵字值進行定義。

值

normal: 最終顏色是頂層顏色，無論底層顏色是什麼。效果就像兩張不透明的紙重疊。
multiply（正片疊底）: 最終顏色是頂層和底層顏色相乘的結果。黑色圖層會導致最終圖層變為黑色，白色圖層則不會發生變化。效果就像兩張印刷在透明膠片上的影像重疊。
screen: 最終顏色是反轉顏色、將它們相乘並反轉該值的結果。黑色圖層不會發生變化，白色圖層會導致最終圖層變為白色。效果就像兩張影像照射到投影螢幕上。
overlay: 如果底層顏色較深，則最終顏色是 multiply 的結果；如果底層顏色較淺，則最終顏色是 screen 的結果。此混合模式等同於 hard-light，但圖層互換。
darken（變暗）: 最終顏色由每個顏色通道中最暗的值組成。
lighten（變亮）: 最終顏色由每個顏色通道中最亮的值組成。
color-dodge（顏色減淡）: 最終顏色是底層顏色除以頂層顏色的反色得到的結果。黑色前景不會發生變化。前景與背景色的反色相同會導致完全明亮的顏色。此混合模式類似於 screen，但前景只需要像背景色的反色一樣亮即可建立完全明亮的顏色。
color-burn（顏色加深）: 最終顏色是反轉底層顏色、將該值除以頂層顏色並反轉該值的結果。白色前景不會發生變化。前景與背景色的反色相同會導致最終影像變為黑色。此混合模式類似於 multiply，但前景只需要像背景色的反色一樣暗即可使最終影像變為黑色。
hard-light（強光）: 如果頂層顏色較深，則最終顏色是 multiply 的結果；如果頂層顏色較淺，則最終顏色是 screen 的結果。此混合模式等同於 overlay，但圖層互換。效果類似於用刺眼的聚光燈照射背景。
soft-light（柔光）: 最終顏色類似於 hard-light，但更柔和。此混合模式的行為類似於 hard-light。效果類似於用漫射聚光燈照射背景。
difference（差值）: 最終顏色是較亮的顏色減去較暗的顏色得到的結果。黑色圖層沒有效果，而白色圖層會反轉另一個圖層的顏色。
exclusion（排除）: 最終顏色類似於 difference，但對比度較低。與 difference 一樣，黑色圖層沒有效果，而白色圖層會反轉另一個圖層的顏色。
hue（色相）: 最終顏色具有頂層顏色的色相，同時使用底層顏色的飽和度和亮度。
saturation（飽和度）: 最終顏色具有頂層顏色的飽和度，同時使用底層顏色的色相和亮度。純灰色背景（沒有飽和度）將沒有效果。
color: 最終顏色具有頂層顏色的色相和飽和度，同時使用底層顏色的亮度。此效果保留了灰度級別，可用於對前景進行著色。
luminosity（亮度）: 最終顏色具有頂層顏色的亮度，同時使用底層顏色的色相和飽和度。此混合模式等同於 color，但圖層互換。

描述

對於應用混合模式的每個圖層中的每個畫素，混合模式會獲取前景和背景的顏色，對其進行計算，並返回新的顏色值。

混合模式之間的變化不會進行插值。任何變化都會立即發生。

正式語法

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

示例

使用“normal”的示例

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

css

#div {
  width: 150px;
  height: 150px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}

為 background-blend-mode 設定其他值，您將獲得不同的結果。

`background-blend-mode` 不同值之間的比較

<div class="container"></div>

css

.container {
  width: 720px;
  height: 760px;
  display: grid;
  grid: auto-flow 190px / repeat(4, 180px);
  border-top: 1px solid #d8d8d8;
  border-left: 1px solid #d8d8d8;
}

.container > div {
  border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}

.container div div {
  margin-left: 15px;
  width: 150px;
  height: 150px;
  background: url("br.png"), url("tr.png");
}

.container div p {
  line-height: 30px;
  margin: 0;
  color: #a33333;
  text-align: center;
}

const list = [
  "normal",
  "multiply",
  "screen",
  "overlay",
  "darken",
  "lighten",
  "color-dodge",
  "color-burn",
  "hard-light",
  "soft-light",
  "difference",
  "exclusion",
  "hue",
  "saturation",
  "color",
  "luminosity",
];

const containerElem = document.querySelector(".container");

list.forEach((item) => {
  const innerElem = document.createElement("div");
  innerElem.style.backgroundBlendMode = item;

  const textElem = document.createElement("p");
  textElem.innerText = item;

  const outerElem = document.createElement("div");
  outerElem.appendChild(textElem);
  outerElem.appendChild(innerElem);

  containerElem.appendChild(outerElem);
});

透過遍歷列表建立多個 div 元素，併為每個元素設定不同的 backgroundBlendMode 值。

`mix-blend-mode` 不同值之間的比較

<div class="container"></div>

.container {
  width: 640px;
  height: 800px;
  display: grid;
  grid: auto-flow 160px / repeat(4, 160px);
  border-top: 1px solid #d8d8d8;
  border-left: 1px solid #d8d8d8;
}

.container > div {
  border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}

.container > div > div {
  position: relative;
  margin-left: 20px;
  width: 120px;
  height: 120px;
}

.container div p {
  margin: 0;
  line-height: 30px;
  color: #a33333;
  text-align: center;
}
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
}

.circle-1 {
  background: red;
}

.circle-2 {
  background: lightgreen;
  left: 40px;
}

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;
}

.isolate {
  isolation: isolate; /* Without isolation, the background color will be taken into account */
  position: relative;
}

const list = [
  "normal",
  "multiply",
  "screen",
  "overlay",
  "darken",
  "lighten",
  "color-dodge",
  "color-burn",
  "hard-light",
  "soft-light",
  "difference",
  "exclusion",
  "hue",
  "saturation",
  "color",
  "luminosity",
  "plus-darker",
  "plus-lighter",
];

const containerElem = document.querySelector(".container");

list.forEach((item) => {
  const innerElem = document.createElement("div");
  innerElem.innerHTML = `
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
  `;

  innerElem.querySelectorAll(".circle").forEach((circle) => {
    circle.style.mixBlendMode = item;
  });

  const textElem = document.createElement("p");
  textElem.innerText = item;

  const outerElem = document.createElement("div");
  outerElem.appendChild(textElem);
  outerElem.appendChild(innerElem);

  containerElem.appendChild(outerElem);
});

在以下示例中，我們透過遍歷列表建立多個 <div> 元素，併為每個元素設定不同的 mixBlendMode 值。

混合模式比較

在以下示例中，我們有一個 <div>，上面設定了兩個背景影像——一個 Firefox 徽標線上性漸變之上。在下面，我們提供了一個 <select> 選單，允許您更改應用於 <div> 的 background-blend-mode，從而比較不同的混合模式效果。

HTML

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

css

div {
  width: 300px;
  height: 300px;
  background:
    url("https://mdn.dev/archives/media/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 2 # ltblendmodegt

瀏覽器相容性

另見

定義 <blend-mode> 值的 CSS 合成和混合模組。
使用此資料型別的屬性：background-blend-mode、mix-blend-mode

其他網站上各種混合模式的描述

維基百科上的混合模式
Adobe 的Adobe Photoshop 中的混合模式

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者於 2025 年 10 月 10 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題