CSS - background-blend-mode 屬性

上一頁
下一頁

CSS background-blend-mode 屬性用於確定元素的背景圖片如何彼此混合或與背景顏色混合。

語法

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;

屬性值

值 描述
normal 不進行混合；背景層按 CSS 中指定的顯示，它們之間沒有任何互動。預設值。
multiply 背景層的顏色相乘，導致影像變暗，重疊的顏色變得更強烈。
screen 背景層的顏色被反轉、相乘，然後再次反轉，導致影像變亮，亮度增加。
overlay 根據背景顏色結合 multiply 和 screen 模式，在較暗區域使影像變暗，在較亮區域使影像變亮。
darken 保留重疊背景層中最暗的顏色，導致整體影像變暗，顏色混合以保持較低的亮度。
lighten 保留重疊背景層中最亮的顏色，導致影像變亮，顏色混合以保持較高的亮度。
color-dodge 使背景層的顏色變亮以反映混合顏色，通常產生高對比度和鮮豔的效果。
saturation 透過調整背景層的飽和度來混合它們，同時保持色調和亮度，從而影響顏色的強度。
color 透過保留色調和飽和度同時組合它們的亮度來混合背景層，從而產生具有混合顏色特徵的彩色影像。
luminosity 透過保留亮度和暗度同時組合它們的色調和飽和度來混合背景層，從而影響整體亮度而不改變顏色特徵。

CSS 背景混合模式屬性示例

以下示例說明了使用不同值的 background-blend-mode 屬性。

使用 Normal 值的背景混合模式屬性

要顯示一個影像，使得背景層在它們之間沒有任何互動的情況下顯示，我們使用 normal 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: normal;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: normal
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

使用 Multiply 值的背景混合模式屬性

要顯示一個影像，使得背景層的顏色相乘，導致影像變暗，重疊的顏色變得更強烈，我們使用 multiply 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: multiply;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: multiply
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

使用 Screen 值的背景混合模式屬性

要顯示一個影像，使得背景層的顏色被反轉、相乘，然後再次反轉，導致影像變亮，亮度增加，我們使用 screen 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: screen;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: screen
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

使用 Overlay 值的背景混合模式屬性

要顯示一個影像，使得影像在較暗區域變暗，在較亮區域變亮，我們使用 overlay 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: overlay;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: overlay
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

使用 Darken 值的背景混合模式屬性

要顯示一個影像，使得保留重疊背景層中最暗的顏色，導致整體影像變暗，顏色混合以保持較低的亮度，我們使用 darken 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: darken;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: darken
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

使用 Lighten 值的背景混合模式屬性

要顯示一個影像，使得保留重疊背景層中最亮的顏色，導致影像變亮，顏色混合以保持較高的亮度，我們使用 lighten 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: lighten;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: lighten
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

使用 Color Dodge 值的背景混合模式屬性

要顯示一個影像，使得背景層的亮色反映混合顏色而變亮，從而產生高對比度和鮮豔的效果，我們使用 color-dodge 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: color-dodge;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: color-dodge
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

使用 Saturation 值的背景混合模式屬性

要顯示一個影像，使得透過調整背景層的飽和度來混合它們，同時保持色調和亮度，從而影響顏色的強度，我們使用 saturation 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: saturation;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: saturation
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

使用 Color 值的背景混合模式屬性

要顯示一個影像，使得透過保留色調和飽和度同時組合它們的亮度來混合背景層，從而產生具有混合顏色特徵的彩色影像，我們使用 color 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: color;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: color
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

使用 Luminosity 值的背景混合模式屬性

要顯示一個影像，使得透過保留亮度和暗度同時組合它們的色調和飽和度來混合背景層，從而影響整體亮度而不改變顏色特徵，我們使用 luminosity 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .blend-mode {
         border: 5px solid lightgray;
         width: 300px;
         height: 300px;
         background: url('/css/images/red-flower.jpg'), 
                     url('/css/images/yellow-flower.jpg');
         background-size: cover;
         background-blend-mode: luminosity;
      }
   </style>
</head>

<body>
   <h2>
      CSS background-blend-mode property
   </h2>
   <h4>
      background-blend-mode: luminosity
   </h4>
   <div class="blend-mode"></div>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
background-blend-mode 35.0 79.0 30.0 7.1 22.0
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.