css3 混合模式mix-blend-mode background-blend-mode 以及混合模式的隔断 isolation
css 混合模式
mix-blend-mode:
让 元素内容 和 这个元素 以及 下面的元素 发生混合
background-blend-mode 背景的混合模式
可以是背景图片的混合也可以是背景图片与背景颜色之间的混合
isolation
是一个CSS3属性,顾名思意是“隔离”,支持的值除了万年不变的inherit
外还包括auto
和isolate
.
我们希望混合模式只到某一个元素,或者只是某一组元素怎么办呢?isolation: isolate
就是为了解决这个问题产生的。
只要元素可以创建层叠上下文,就可以阻断mix-blend-mode!
于是,不仅仅是isolation:isolate
,下面这些也是可以的:
z-index
值不为auto
的position:relative
/position:absolute
定位元素。position:fixed
,仅限Chrome浏览器,其他浏览器遵循上一条,需要z-index
为数值。z-index
值不为auto
的flex
项(父元素display:flex|inline-flex
).- 元素的
opacity
值不是1
. - 元素的
transform
值不是none
. - 元素
mix-blend-mode
值不是normal
. - 元素的
filter
值不是none
. will-change
指定的属性值为上面任意一个。- 元素的
-webkit-overflow-scrolling
设为touch
.
isolation:isolate
之所以可以阻断混合模式的进行,本质上是因为isolation:isolate
创建一个新的层叠上下文(stacking context)。
background-blend-mode
天生是一个封闭的混合领域,不会影响其他元素。