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

最新推荐文章于 2024-05-09 09:14:00 发布

前端筱园

最新推荐文章于 2024-05-09 09:14:00 发布

阅读量1.7k

点赞数 1

分类专栏： CSS 前端文章标签： css 样式 mix-blend-mode

dengzhanyong

本文链接：https://blog.csdn.net/DengZY926/article/details/110644368

版权

前端同时被 2 个专栏收录

32 篇文章 8 订阅

订阅专栏

CSS

17 篇文章 0 订阅

订阅专栏

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

关注我的个人公众号【前端筱园】，不错过我的每一篇推送

前端筱园

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
2
评论
【你不知道的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：颜色luminos
复制链接

扫一扫