isolation独立层叠上下文用例

1. 图片显示在文字下方,背景上方

只需要在容器加上

.card {
  position: relative;
  isolation: isolate;
}

详细可参考 [译]你需要知道的CSS属性isolation,原文 The CSS property you didn't know you needed

 

2. 隔离mix-blend-mode

就是使得mix-blend-mode失效,在多个层级叠加,需要分离某一个层级时,非常有用

对background-blend-mode无效,因为它是本层级中的,不是其他层级

详细可参考 isolation

posted @ 2023-12-07 14:21  全玉  阅读(10)  评论(0编辑  收藏  举报