mix-blend-mode:multiply浅色背景素材混合效果实例页面

展示

代码

• HTML：

  <div class="box">
      <div class="list">
          <img src="1.jpg">
      </div>
      <div class="list">
          <img src="2.jpg">
      </div>
      <div class="list">
          <img src="3.jpg">
      </div>
      <div class="list">
          <img src="4.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;
  }
  .list img {
      width: 150px; height: 200px;
      object-fit: cover;
      display: block;
  }
  .list::before {
      content: "";
      position: absolute; left: 0;
      width: 100%; height:100%;
      background: url(pattern.jpg);
      mix-blend-mode: multiply;
  }