学习笔记——CSS混合模式

迷南。 2023-01-19 03:19 42阅读 0赞

> 在写前端页面时，使用gif图片，其背景是黑色，但是我需要让gif图片与我页面背景相融合，不要显得太过突兀。

--------------------

实现混合效果主要使用CSS属性：**mix-blend-mode。**

**原图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS混合模式</title>
        <style>
          * { padding: 0; margin: 0; }
          .box {
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: red;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .img {
            width: 250px;
            height: 250px;
            mix-blend-mode: 模式;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <img src="./electricity.gif" alt="" class="img" />
        </div>
      </body>
    </html>

**1.屏幕/滤色模式：screen**

mix-blend-mode: screen;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 1][]

**2.差值/差异模式：difference**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 2][]

**除了最常用的screen模式外，还有正片叠底模式(Multiply)，叠加模式(Overlay)，变暗模式(Darken)，变亮模式(Lighten)，颜色减淡(Color-Dodge)，颜色加深(Color-Burn)，强光模式(Hard-Light)，柔光模式(Soft-Light)，色相/色调模式(Hue)，饱和度模式(Saturation)，颜色模式(Color)，亮度/明度模式(Luminosity)，排除模式(Exclusion)。详情请学习：[开始了解CSS混合模式\_CSS混合模式 教程\_W3cplus][CSS_CSS_ _W3cplus]。**

**isolation属性：**

**mix-blend-mode混合模式会将该元素以及位于该元素下面的所有背景混合起来。如果只想混合距离该元素最近的一个背景元素A，可以在A元素中使用isolation: isolate;属性将其隔离起来。**

**`background-blend-mode`属性：**

**`background-blend-mode`属性指定了源元素应该怎样把自己的颜色同自己的背景图片和背景颜色混和起来。如果该元素下还有任何其它的层（例如一个使用蓝色背景颜色的`section`元素），它将不会把自己的颜色与该元素相混合。它只会把自身的颜色与CSS中为其指定的背景图像和颜色混和在一起。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221021/031ac9baa0d5438aa746c77758c33a88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 1]: /images/20221021/efc0694d0168494c822cdf8f43e7ca4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 2]: /images/20221021/540b1ea37ca0435da0940d0b7c128dfb.png
[CSS_CSS_ _W3cplus]: https://www.w3cplus.com/css3/getting-to-know-css-blend-modes.html