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>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
mix-blend-mode 41.0 79.0 32.0 8.0 35.0
css_properties_reference.htm
打印页面
上一页
下一页
广告