CSS3 mix-blend-mode
首先，要知道”blend-mode”就是混合模式的意思。那mix, 恩，我也不知道为什么命名为mix, 可能是该属性不仅可以作用于HTML，还可以作用于SVG，干脆叫mix一起捋过来。该CSS属性作用是让元素内容和这个元素的背景以及下面的元素发生“混合”。
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; //复原
CSS3 background-blend-mode
background-blend-mode这个要更好理解一点，背景的混合模式。可以是背景图片之间的混合，也可以是背景图片和背景色的混合。
相关内容
-
为什么grid-gap会导致溢出？
您有一个3列网格容器(.body):grid-template-columns:25%50%25%这些列的总宽度为100%。然后在列（和行）之间添加沟槽：grid-gap:10...
-
css3给背景图层加颜色遮罩的方法
（学习视频分享：css视频教程）在开发中，有时遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。方法一：通过定位叠加(注意层级)<divcla...
-
使用CSS实现的几种进度条
（学习视频分享：css视频教程）进度条是一个非常常见的功能，实现起来也不难，一般我们都会用div来实现。作为一个这么常见的需求，whatwg肯定是不会没有原生组件提供（虽然有我...
-
CSS3实现文字折纸效果的方法（代码示例）
本篇文章给大家通过示例介绍一下使用CSS3来实现文字折纸效果的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下，希望对大家有所帮助。CSS3文字折纸代码如下，...
-
css3字体可以模糊吗
css3字体的可以模糊的；开发者可以使用CSS3中的filter属性来实现字体模糊效果，filter语法是“filter:blur(px);”，其filter属性定义了元素的可...
-
vs2010 如何支持css3
vs2010支持css3的方法：首先下载CSS3IntellisenseSchema并安装；然后用“Win+R”输入“regedit”打开注册表；接着将css30.xml拷贝到...
-
聊聊你可能不了解的CSS属性函数 attr()
本篇文章带大家了解一下CSS属性函数attr()。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。属性函数attr()用于获取HTML元素里面的属性值,并用于样...
-
浅谈css3 device-width和width之间的差异
本篇文章和大家谈谈css媒体查询中device-width与width的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。【推荐教程：CSS视频教程】1.d...
-
css3怎么设置元素背面不可见
在css3中，可以利用backface-visibility属性，通过给元素添加“backface-visibility:hidden;”样式来设置背面不可见。backface...
-
详细了解CSS3中的border-image-slice属性
【推荐教程：CSS视频教程】首先我们来了解一下它是干嘛的。说明：文档说明：它是控制图像边界向内偏移的。what？？？这是嘛意思啊？根本看不懂！！！好的，我们先不要急，我们在看看...
