CSS 数据类型 - <blend-mode>

上一页
下一页

CSS <blend-mode> 数据类型指定了当元素重叠时应使用的颜色方案。此数据类型由 background-blend-mode 和 mix-blend-mode 属性使用。

可能的值

  • normal − 默认值。顶部颜色完全覆盖底部颜色。

  • multiply − 将顶部和底部的颜色值相乘以获得最终颜色。

  • screen − 最终颜色是通过反转、相乘，然后再次反转该值获得的。

  • overlay − 最终颜色取决于底部颜色是较暗还是较亮，如果较暗则相乘，如果较亮则使用“screen”模式。类似于“hard-light”，但层级交换。

  • darken − 最终颜色是每个颜色通道中最暗的值。

  • lighten − 最终颜色是每个颜色通道中最亮的值。

  • color-dodge − 将底部颜色除以顶部颜色的倒数以获得最终颜色。

  • color-burn − 反转底部颜色，将其除以顶部颜色，然后反转该值以获得最终颜色。

  • hard-light − 最终颜色取决于顶部颜色是较暗还是较亮，如果较暗则相乘，如果较亮则与“screen”相同。类似于“overlay”，但层级交换。

  • soft-light − 最终颜色比 hard-light 更柔和。类似于 hard-light。

  • difference − 最终颜色是较亮和较暗阴影之间的差异。黑色不影响结果，但白色交换颜色。

  • exclusion − 类似于“difference”，但对比度较低。黑色层没有效果，而白色反转其他颜色。

  • hue − 最终颜色使用顶部颜色的色相以及底部颜色的饱和度和亮度。

  • saturation − 最终颜色将顶部颜色的饱和度与底部颜色的色相和亮度结合起来。

  • color − 最终颜色将顶部颜色的色相和饱和度与底部颜色的亮度结合起来。

  • luminosity − 它类似于“color”的值，但层级交换。

语法

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

CSS - background-blend-mode: normal

以下示例演示了 background-blend-mode: normal 属性使顶部颜色成为最终颜色。红色框完全覆盖蓝色框 -

这是一个示例 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: blue;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: red; 
      position: absolute;
      top: 60px;
      left: 60px;
      background-blend-mode: normal; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - background-blend-mode: multiply

当您设置 mix-blend-mode: multiply 时，红色框和蓝色框混合在一起，在两个框重叠的地方创建黑色阴影 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: blue;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: red; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: multiply; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: screen

以下示例演示了红色框使用 mix-blend-mode: screen，与蓝色框重叠，产生一种新的颜色，它是红色和蓝色两种颜色的混合 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: blue;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: red; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: screen; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: overlay

以下示例演示了 mix-blend-mode: overlay 属性的使用，它使蓝色框完全隐藏红色框 -

<html>
<head>
<style>
  .box {
    width: 300px;
    height: 200px;
    position: relative;
  }
  .background-box {
    width: 150px;
    height: 150px;
    background-color: blue;
  }
  .front-box {
    width: 150px;
    height: 150px;
    background-color: red; 
    position: absolute;
    top: 60px;
    left: 60px;
    mix-blend-mode: overlay; 
  }
</style>
</head>
<body>
  <div class="box">
    <div class="background-box"></div>
    <div class="front-box"></div>
  </div>
</body>
</html>

CSS - mix-blend-mode: darken

以下示例演示了 mix-blend-mode: darken 属性组合了红色和蓝色框，在它们重叠的地方产生了更深的颜色阴影 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: blue;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: red; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: darken; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: lighten

以下示例演示了 mix-blend-mode: lighten 属性组合了红色和蓝色框，在它们重叠的地方产生了浅色的阴影 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: blue;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: red; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: lighten; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: color-dodge

以下示例演示了 mix-blend-mode: color-dodge 属性导致红色框和蓝色框的重叠区域看起来更亮。 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: blue;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: red; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: color-dodge; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: color-burn

以下示例演示了 mix-blend-mode: color-burn 属性导致变暗的效果。框重叠的地方变得比原始颜色中的任何一个颜色都更暗 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: orange;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: color-burn; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: hard-light

以下示例演示了 mix-blend-mode: hard-light 属性，它应用于蓝色颜色框，完全隐藏了红色框 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: red;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: hard-light; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: soft-light

以下示例演示了 mix-blend-mode: soft-light 属性，它应用于蓝色颜色框，导致红色框完全隐藏了蓝色框 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: red;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: soft-light; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: difference

以下示例演示了 mix-blend-mode: difference 属性导致从较亮的颜色中减去较暗的颜色并创建独特的颜色 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: red;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: difference; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: exclusion

以下示例演示了应用于蓝色框的 mix-blend-mode: exclusion 属性。当蓝色和红色框重叠时，它们会创建一种独特的颜色 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: red;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: exclusion; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: hue

以下示例演示了应用于蓝色框的 mix-blend-mode: hue 属性。当蓝色和橙色框重叠时，它会根据它们的色相值生成颜色 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: orange;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: hue; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: saturation

以下示例演示了带有 mix-blend-mode: saturation 的红色框根据顶层创建新的颜色饱和度 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: orange;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: saturation; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: color

以下示例演示了带有 mix-blend-mode: color 的红色框根据顶层的色相和饱和度创建新的颜色 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: orange;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: color; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: luminosity

以下示例演示了应用于蓝色框的 mix-blend-mode: luminosity 属性。当蓝色和橙色框重叠时，它们会产生深色 -

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: orange;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: luminosity; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>
打印页面

上一页
下一页
广告