网站开发中CSS3的混合模式

在网站开发中,CSS3混合模式(CSS3 Blend Modes)是CSS3新增的一个魔法特性,可以允许多个背景或多个元素进行混合,类似于Photoshop的图层混合模式。

属性属性说明
background-blend-mode设置多背景的混合模式
mix-blend-mode设置多个元素的混合模式
isolation设置元素的隔离模式

1. background-blend-mode: <blend-mode>

设置多背景之间的混合模式,背景色、背景图像、渐变背景之间的混合模式。

<blend-mode>可以接受16个取值,分别为:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hand-light | soft-light | difference | exclusion | hue | saturation | color | luminosity等。

2. mix-blend-mode: <blend-mode>

设置多元素之间的混合模式。html元素之间、html与svg元素之间均可以。

3. isolation: auto | isolate

设置元素的隔离模式

属性值含义
auto(默认值)当前元素和所有下方元素均产生混合。
isolate产生一个隔离元素,只有隔离元素内的元素参与混合


注意:混合模式在Chrome和Firefox浏览器兼容性还可以,其它均比较差。

浏览:304 | 点赞:138 | 评论:0
全部评论
暂无评论

快速评论