【你不知道的CSS】mix-blend-mode

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。它有以下属性值:

  • normal:正常
  • multiply:正片叠底
  • screen:滤色
  • overlay:叠加
  • darken:变暗
  • lighten:变亮
  • color-dodge:颜色减淡
  • color-burn:颜色加深
  • hard-light:强光
  • soft-light:柔光
  • difference:差值
  • exclusion:排除
  • hue:色相
  • saturation:饱和度
  • color:颜色
  • luminosity:亮度
  • initial:初始
  • inherit:继承
  • unset:复原
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    .mode{
        position: relative;
    }
    .text{
      position: absolute;
      top: 20px;
      left: 20px;
      bottom: 20px;
      right: 20px;
      background: rgb(108, 124, 15);
      font: bolder 100px 'Alfa Slab One';
      color: #fff;
      text-align: center;
      padding-top: 10px;
    }
</style>
</head>
<body>
  <div class="mode">
    <div class="text" :style="{'mix-blend-mode': value}">
        CSS<br />mix-blend-mode
    </div>
    <img src="https://www.dengzhanyong.com/PHP/images/1606961604.jpg" />
  </div>
</body>
</html>

正常情况下是这种效果

现在我们来添加mix-blend-mode属性,并为它赋上不同的值看看效果:

mix-blend-mode: multiply; //正片叠底

mix-blend-mode: screen; //滤色

mix-blend-mode: overlay; //叠加

mix-blend-mode: darken; //变暗

mix-blend-mode: lighten; //变亮

这里我就不一一的举例了,这个属性在有些时候可以解决一些棘手的样式问题,近期我对个人网站的样式又进行了一些优化,其中有一个波浪的效果。

其实这个就是一张gif图,它的原图其实是这样的

gif不能像png那样看到后面的内容,此时放到项目中的实际效果就是这样。

很显然这与我们想要的效果相差甚远,利用mix-blend-mode可以很好的解决这个问题。设置属性值为 screen ,就可以把黑色区域后面的内容透视上来。

<img class="wave-wrap" src="https://www.dengzhanyong.com/xiaomanju/sources/wave.gif"/>
.wave-wrap {
  position absolute
  bottom 0
  left 0
  width 100%
  height 100px
  mix-blend-mode: screen; 
}

在实际使用中,你可能不太了解每个属性值的实际效果什么样,这里建议可以每个值都去试一下,总有一个可以达到你想要的效果。

兼容性

在这里插入图片描述

欢迎访问我的个人网站(相信你会喜欢上我的风格):www.dengzhanyong.com
关注我的个人公众号【前端筱园】,不错过我的每一篇推送

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页