CSS3
新增了一个很奇妙的属性 – mix-blend-mode
,这个属性的作用根据名字翻译过来就是混合模式。可以根据这个新特性优化一些图形颜色展示。
一、定义
mix-blend-mode
属性描述了元素的内容应该与元素的直系父元素
的内容和元素的背景
如何混合。
二、浏览器支持
属性 | Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
mix-blend-mode | 41.0 | 不支持 | 32.0 | 8.0 | 35.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 |
|
展示:
使用了混合模式,图片和背景色融合在一起了,展示效果很神奇有木有。
demo演示地址:https://tiven.cn/demo/mix-blend-mode.html
欢迎访问:天问博客
本文作者: Tiven
发布时间: 2021-11-16
最后更新: 2023-03-02
本文标题: CSS3学习与总结 · mix-blend-mode属性
本文链接: https://www.tiven.cn/p/5183611c/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2021-11-16
最后更新: 2023-03-02
本文标题: CSS3学习与总结 · mix-blend-mode属性
本文链接: https://www.tiven.cn/p/5183611c/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!