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>
列印頁面

上一頁
下一頁
廣告