CSS - mix-blend-mode 屬性

CSS mix-blend-mode 屬性決定了元素的內容應該如何與其父元素的內容以及元素的背景內容混合。

語法

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;

屬性值

值	描述
normal	不發生混合。
multiply	透過將背景色和前景顏色相乘來使顏色變暗。
screen	透過反轉、相乘，然後再次反轉來使顏色變亮。
overlay	它結合了 multiply 和 screen，保留了高光和陰影。
darken	它保留重疊元素中較暗的顏色。
lighten	它保留重疊元素中較亮的顏色。
color-dodge	透過降低元素的顏色來使背景變亮。
color-burn	透過增加元素的顏色來使背景變暗。
difference	它減去顏色以建立高對比度效果。
exclusion	它類似於 difference，但對比度效果更柔和。
hue	它保留亮度和飽和度，只改變色相。
saturation	它保留亮度和色相，只改變飽和度。
color	它將元素的色相和飽和度與亮度相結合。
luminosity	它保留色相和飽和度，只改變亮度。

CSS 混合模式屬性示例

以下示例使用不同的值解釋了mix-blend-mode屬性。

使用 normal 值的混合模式屬性

為了防止元素與其他圖層互動，我們使用normal值。元素按原樣呈現，不會與底層圖層有任何互動。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: normal;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: normal
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

使用 multiply 值的混合模式屬性

為了將背景色和前景顏色相乘，從而產生較暗的顏色，我們使用multiply值。它會產生豐富的陰影。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: multiply;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: multiply
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

使用 screen 值的混合模式屬性

為了透過反轉兩層、相乘然後反轉結果來使顏色變亮，我們使用screen值。它會產生增亮效果。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: screen;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: screen
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

使用 overlay 值的混合模式屬性

為了透過使暗區變暗和使亮區變亮來增強對比度，我們使用overlay值。它結合了 multiply 和 screen，保留了高光和陰影。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: overlay;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: overlay
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

使用 darken 值的混合模式屬性

為了比較背景色和前景顏色，保留較暗的顏色，我們使用darken值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: darken;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: darken
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

使用 lighten 值的混合模式屬性

為了保留重疊元素中較亮的顏色，我們使用lighten值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: lighten;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: lighten
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

使用 color-dodge 值的混合模式屬性

為了透過降低前景顏色的強度來使背景變亮，我們使用color-dodge值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: color-dodge;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: color-dodge
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

使用 color-burn 值的混合模式屬性

為了透過增加前景顏色的強度來使背景變暗，我們使用color-burn值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: color-burn;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: color-burn
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

使用 difference 值的混合模式屬性

為了減去重疊圖層的顏色，從而產生高對比度效果，我們使用difference值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: difference;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: difference
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

使用 exclusion 值的混合模式屬性

為了減去重疊圖層的顏色，從而產生柔和的對比度效果，我們使用exclusion值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: exclusion;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: exclusion
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

使用 hue 值的混合模式屬性

為了保留背景的亮度和飽和度，同時只改變元素的色相，我們使用hue值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: hue;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: hue
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

使用 saturation 值的混合模式屬性

為了保留亮度和色相，只修改元素的飽和度，我們使用saturation值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: saturation;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: saturation
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

使用 color 值的混合模式屬性

為了將元素的色相和飽和度與背景的亮度相結合，我們使用color值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: color;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: color
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

使用 luminosity 值的混合模式屬性

為了保留元素的色相和飽和度，只改變亮度，我們使用luminosity值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: #6666ff;
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
      }

      .container>img {
         mix-blend-mode: luminosity;
      }
   </style>
</head>
<body>
   <h2>
      CSS mix-blend-mode property
   </h2>
   <h4> 
      mix-blend-mode: luminosity
   </h4>
   <div class="container">
      <img src="/css/images/content.png" 
      alt="img" height=250 width=300/>
   </div>
</body>
</html>

支援的瀏覽器

屬性
mix-blend-mode	41.0	79.0	32.0	8.0	35.0

css_properties_reference.htm

列印頁面