CSS混合模式-css教程-PHP中文网

CSS混合模式

高洛峰

发布： 2017-02-23 10:07:49

原创

1934人浏览过

前面的话

层叠上下文z-index只是解决两个元素覆盖，谁离用户更近的问题。而css混合模式，则是处理两个元素覆盖部分如何混合的问题。如果了解photoshop的话，对这种现象应该不陌生。css3有两个与混合模式相关的属性：mix-blend-mode和background-blend-mode，本文将详细介绍css混合模式

元素混合

元素混合mix-blend-mode应用于两个元素之间的混合

mix-blend-mode

初始值: normal

立即学习“前端免费学习笔记（深入）”；

应用于: 所有元素

继承性: 无

兼容性: IE浏览器、android4.4-不支持，safari和IOS需要添加-webkit-前缀

[注意]该元素会创建层叠上下文，z-index属性有效

背景混合

背景混合background-blend-mode应用于一个元素的多背景图或背景图与背景颜色之间的混合

background-blend-mode

初始值: normal

立即学习“前端免费学习笔记（深入）”；

应用于: 所有元素

继承性: 无

兼容性: IE浏览器、android4.4-不支持，safari和IOS需要添加-webkit-前缀

隔离

隔离isolation的作用是创建一个堆叠上下文stacking context，主要用于与mix-blend-mode属性一起使用时，将混合模式只应用于某一个元素或某一组元素

isolation

初始值: auto

应用于: 所有元素

继承性: 无

值: auto | isolate(创建新的堆叠上下文) | initial | inherit | unset

<style>
body{background-color: gray;}
.test1,.test2{display: inline-block;width: 100px;height: 100px;border:1px solid black;}
.test2{isolation: isolate;}
.in{width: 50px;height: 50px;background-color: red;mix-blend-mode: screen;}
</style>
</head>
<body>
<p class="test1">
    <p class="in"></p>
</p>
<p class="test2">
    <p class="in"></p>
</p>

登录后复制

如果不使用isolation: isolate创建堆叠上下文，由于.test1和.test2背景颜色透明，则.in会和

背景颜色混合，成为粉色。使用isolation: isolate后，.test2从中隔离出来，不与的背景进行混合，从而保留其原先的红色

由于isolation: isolate的作用就是创建堆叠上下文，所以只要能创建堆叠上下文，就可以实现隔离的效果，所以，类似地，relative、filter等样式也可以实现类似效果

更多CSS混合模式相关文章请关注PHP中文网！