CSS混合模式-创新互联
层叠上下文z-index只是解决两个元素覆盖,谁离用户更近的问题。而CSS混合模式,则是处理两个元素覆盖部分如何混合的问题。如果了解photoshop的话,对这种现象应该不陌生。CSS3有两个与混合模式相关的属性:mix-blend-mode
和background-blend-mode
,本文将详细介绍CSS混合模式
元素混合
元素混合mix-blend-mode应用于两个元素之间的混合
mix-blend-mode
初始值: normal
应用于: 所有元素
继承性: 无
值: normal(正常) | multiply(正片叠底) | screen(滤色) | overlay(叠加) | darken(变暗) | lighten(变亮) | color-dodge(颜色减淡) | color-burn(颜色加深) | hard-light(强光) | soft-light(柔光) | difference(差值) | exclusion(排除) | hue(色相) | saturation(饱和度) | color(颜色) | luminosity
(亮度) | initial(初始) | inherit(继承) | unset(复原)
兼容性: IE浏览器、android4.4-不支持,safari和IOS需要添加-webkit-前缀
[注意]该元素会创建层叠上下文,z-index属性有效
背景混合
背景混合background-blend-mode应用于一个元素的多背景图或背景图与背景颜色之间的混合
background-blend-mode
初始值: normal
应用于: 所有元素
继承性: 无
值: normal(正常) | multiply(正片叠底) | screen(滤色) | overlay(叠加) | darken(变暗) | lighten(变亮) | color-dodge(颜色减淡) | color-burn(颜色加深) | hard-light(强光) | soft-light(柔光) | difference(差值) | exclusion(排除) | hue(色相) | saturation(饱和度) | color(颜色) | luminosity
(亮度) | initial(初始) | inherit(继承) | unset(复原)
兼容性: IE浏览器、android4.4-不支持,safari和IOS需要添加-webkit-前缀
隔离
隔离isolation的作用是创建一个堆叠上下文stacking context,主要用于与mix-blend-mode属性一起使用时,将混合模式只应用于某一个元素或某一组元素
isolation
初始值: auto
应用于: 所有元素
继承性: 无
值: auto | isolate(创建新的堆叠上下文) | initial | inherit | unset
如果不使用isolation: isolate
创建堆叠上下文,由于.test1
和.test2
背景颜色透明,则.in
会和背景颜色混合,成为粉色。使用
isolation: isolate
后,.test2
从中隔离出来,不与
的背景进行混合,从而保留其原先的红色
[注意]由于isolation: isolate
的作用就是创建堆叠上下文,所以只要能创建堆叠上下文,就可以实现隔离的效果,所以,类似地,relative、filter等样式也可以实现类似效果
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
名称栏目:CSS混合模式-创新互联
文章地址:http://scjbc.cn/article/ceidhi.html