CSS3学习与总结 · mix-blend-mode属性


字数:441 阅读时长:2分钟 阅读:85

CSS3 新增了一个很奇妙的属性 – mix-blend-mode,这个属性的作用根据名字翻译过来就是混合模式。可以根据这个新特性优化一些图形颜色展示。

CSS3 mix-blend-mode 混合模式

一、定义

  • mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

二、浏览器支持

属性ChromeEdgeFirefoxSafariOpera
mix-blend-mode41.0不支持32.08.035.0

三、属性值

属性值含义
normal正常
multiply正片叠底
screen滤色
overlay叠加
darken变暗
lighten变亮
color-dodge颜色减淡
color-burn颜色加深
hard-light强光
soft-light柔光
difference差值
exclusion排除
hue色相
saturation饱和度
color颜色
luminosity亮度
initial初始
inherit继承
unset复原

四、实例

这里以mix-blend-mode的值multiply为例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3新属性:mix-blend-mode | 天問</title>
<style>
.container {
padding: 30px 0;
}
h1 {
text-align: center;
}
.box {
text-align: center;
padding: 30px;
background: #E998A3;
margin-top: 20px;
}
.img {
height: 80px;
}
.mixin .img {
mix-blend-mode: multiply;
}
.desc {
padding: 30px 0;
}
</style>
</head>
<body>

<div class="container">
<h1>CSS3新属性:mix-blend-mode</h1>

<div class="box">
<img src="https://tiven.cn/static/img/hourglass-time-hours-sand-preview-tOqBton_9Qy7cZsnLctFJ.jpg" alt="tiven.jpg" class="img">
<div class="desc">原图展示</div>
</div>

<div class="box mixin">
<img src="https://tiven.cn/static/img/hourglass-time-hours-sand-preview-tOqBton_9Qy7cZsnLctFJ.jpg" alt="tiven.jpg" class="img">
<div class="desc">使用mix-blend-mode属性后展示</div>
</div>
</div>

</body>
</html>

展示:

CSS3混合模式

使用了混合模式,图片和背景色融合在一起了,展示效果很神奇有木有。

demo演示地址:https://tiven.cn/demo/mix-blend-mode.html


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2021-11-16
最后更新: 2021-11-18
本文标题: CSS3学习与总结 · mix-blend-mode属性
本文链接: https://www.tiven.cn/p/5183611c/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^