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
打印页面
上一页
下一页
广告