mix-blend-mode:screen滤色与前景特效实例页面

展示

代码

• HTML：

  <div class="box">
      <div class="list">
          <img src="bright.jpg">
      </div>
      <div class="list">
          <img src="diffuse.jpg">
      </div>
      <div class="list">
          <img src="rains.jpg">
      </div>
      <div class="list">
          <img src="snow.jpg">
      </div>
  </div>

• CSS：

  .box {
      display: flex;
      max-width: 680px;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: auto;
  }
  .list {
      flex: 0 0 150px;
      position: relative;
      margin: 10px;
      background: url(landscape.jpg) center / cover;
  }
  .list img {
      width: 150px; height: 200px;
      display: block;
      mix-blend-mode: screen;
  }