如何给图片加上一层好看的滤镜呢🤔？？两个好玩的css属性 mix-blend-mode、background-blend-mode可以帮忙实现 。
使用说明
mix-blend-mode： 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
background-blend-mode： 属性定义了背景层的混合模式（图片与颜色）。
css语法
mix-blend-mod: <blend-mode>
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
| 值 | 描述 |
|---|---|
| normal | 默认值。设置正常的混合模式。 |
| multiply | 正片叠底模式。 |
| screen | 滤色模式。 |
| overlay | 叠加模式。 |
| darken | 变暗模式。 |
| lighten | 变亮模式。 |
| color-dodge | 颜色减淡模式。 |
| saturation | 饱和度模式。 |
| color | 颜色模式。 |
| luminosity | 亮度模式。 |
效果展示
举个🌰、实现类抖音眩晕效果
效果展示
实现思路
其实是两张同样的背景图片的叠加，一张的背景利用 background-blend-mode 属性，将 背景图片+背景蓝绿色 融合；另一张将 背景图片+背景红色 融合。其中一张设置一定量的偏移（利用margin-left：10px实现，这里比较重要）,并且两张图片设置不同的 z-index堆叠层级（不设置也行，看着效果差别不大），实现重叠效果。
图片拆分演示
