学习笔记——CSS混合模式

最新推荐文章于 2024-05-25 22:33:38 发布

一一GG

最新推荐文章于 2024-05-25 22:33:38 发布

阅读量427

点赞数

分类专栏：前端学习文章标签： css3 css

本文链接：https://blog.csdn.net/qq_41339126/article/details/116492866

版权

前端学习专栏收录该内容

107 篇文章 2 订阅

订阅专栏

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

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

原图：

<!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;

2.差值/差异模式：difference

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

isolation属性：

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

background-blend-mode属性：

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

一一GG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习笔记——CSS混合模式

在写前端页面时，使用gif图片，其背景是黑色，但是我需要让gif图片与我页面背景相融合，不要显得太过突兀。实现混合效果主要使用CSS属性：mix-blend-mode。原图：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> .
复制链接

扫一扫