温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS混合模式

发布时间:2020-10-14 10:09:01 来源:网络 阅读:304 作者:zddnd 栏目:网络安全

层叠上下文z-index只是解决两个元素覆盖,谁离用户更近的问题。而CSS混合模式,则是处理两个元素覆盖部分如何混合的问题。如果了解photoshop的话,对这种现象应该不陌生。CSS3有两个与混合模式相关的属性:mix-blend-modebackground-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

<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><div class="test1">
    <div class="in"></div></div><div class="test2">
    <div class="in"></div></div>

如果不使用isolation: isolate创建堆叠上下文,由于.test1.test2背景颜色透明,则.in会和<body>背景颜色混合,成为粉色。使用isolation: isolate后,.test2<body>中隔离出来,不与<body>的背景进行混合,从而保留其原先的红色

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


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI