CSS3之mix-blend-mode

leanxi 发布于2019-08-02 10:24 / 1360人阅读

摘要：在线编辑属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。正常正片叠底滤色叠加变暗变亮颜色减淡颜色加深强光柔光差值排除色相饱和度颜色亮度初始继承复原在线编辑参考资料原文地址

在线编辑demo

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

mix-blend-mode: normal; //正常

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

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

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

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

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

mix-blend-mode: color-dodge; //颜色减淡

mix-blend-mode: color-burn; //颜色加深

mix-blend-mode: hard-light; //强光

mix-blend-mode: soft-light; //柔光

mix-blend-mode: difference; //差值

mix-blend-mode: exclusion; //排除

mix-blend-mode: hue; //色相

mix-blend-mode: saturation; //饱和度

mix-blend-mode: color; //颜色

mix-blend-mode: luminosity; //亮度

mix-blend-mode: initial; //初始

mix-blend-mode: inherit; //继承

mix-blend-mode: unset; //复原

在线编辑demo

参考资料：

MDN: mix-blend-mode
原文地址

GPU云服务器云服务器 mix-blend-mode css3 css3气泡 css3动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52325.html

CSS3之mix-blend-mode

摘要：在线编辑属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。正常正片叠底滤色叠加变暗变亮颜色减淡颜色加深强光柔光差值排除色相饱和度颜色亮度初始继承复原在线编辑参考资料原文地址 showImg(https://segmentfault.com/img/remote/1460000014766135); 在线编辑demo 属性描述了元素的内容应该与元素的直系父元素的内容...

stdying 2019-08-29 15:19 评论0 收藏0
CSS3之mix-blend-mode

摘要：属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。正常正片叠底滤色叠加变暗变亮颜色减淡颜色加深强光柔光差值排除色相饱和度颜色亮度初始继承复原属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 mix-blend-mode: normal; /...

wangjuntytl 2021-11-23 09:51 评论0 收藏0
CSS3学习小结

摘要：看到人家实现的实在是太棒了，就想到该学学了。属性用来查询浏览器是否支持新特性。还有语句，不支持的时候执行。还支持多个条件块，，，。浏览器支持情况只有，，的支持情况比较好。这几日在http://lab.iamvdo.me/houdini/看到了很炫酷的CSS实现。看到人家实现的实在是太棒了，就想到该学学CSS了。 @support属性 @support:用来查询浏览器是否支持css新特...

WrBug 2019-08-29 13:47 评论0 收藏0
CSS > CSS3 中的层叠上下文初探

摘要：但该盒不建立新的层叠上下文，除非是根元素。以上是基于的层叠上下文介绍。同级情况下，按照二者在源代码中的顺序，居后的又重新占领高地了。现在我们看以下源代码这个时候，以视口为包含块进行定位和大小计算，将会铺满整个屏幕。前言：关于层叠上下文，笔者还没有去阅读更详细的 W3C 规范来了解更本质的原理（表打我，等我校招拿到 offer 了我就读好伐 T_T）。一直听说 CSS3 里的层叠上下文...

pcChao 2019-08-28 18:18 评论0 收藏0
mix-blend-mode及background-blend-mode实现炫酷的图片样式

摘要：在网上看到了有如相机功能的实现比较好看的图片样式，自己也想弄下，在这里记录下效果图相关属性正常正片叠底滤色叠加变暗变亮颜色减淡颜色加深强光柔光差值排除色相饱和度颜色在网上看到了有如相机功能的mix-blend-mode实现比较好看的图片样式，自己也想弄下，在这里记录下 1.效果图 showImg(https://segmentfault.com/img/bVblsM0?w=726&...

gougoujiang 2019-08-30 15:54 评论0 收藏0