isolation:isolate作用效果示意实例页面

展示

代码

• HTML：

  <h4>isolation:auto（默认）</h4>
  <div class="box">
      <div class="inner">
          <img src="../images/landscape.jpg" class="mode">
      </div>
  </div>
  
  <h4>isolation:isolate</h4>
  <div class="box">
      <div class="inner isolation">
          <img src="../images/landscape.jpg" class="mode">
      </div>
  </div>

• CSS：

  .box {
      background: linear-gradient(deepskyblue, deeppink);
  }
  .inner {
      height: 256px;
      background: url(../images/nature-7.jpg) no-repeat center / contain;    
  }
  .mode {
      mix-blend-mode: overlay;
      width: 100%; height: 100%;
      object-fit: contain;
  }
  
  .isolation {
      isolation: isolate;
  }