轉自：http://www.zhangxinxu.com/wordpress/?p=5155

只要元素可以創建層疊上下文，就可以阻斷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.

眼見為實，您可以狠狠地點擊這里：層疊上下文與混合模式阻隔測試demo

總結

以上是生活随笔為你收集整理的理解CSS3 isolation: isolate的表现和作用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。