background-blend-mode纹理背景渐进增强实现实例页面

展示

代码

• HTML：

  <div class="background-pattern"></div>

• CSS：

  .background-pattern {
      width: 480px; height: 200px;
      max-width: 100%;
      margin: auto;
      background: floralwhite url(../images/pattern.png) 10px 10px;
      background: repeating-linear-gradient( floralwhite, floralwhite 10px, lightcoral 10px, lightcoral 15px, floralwhite 15px, floralwhite 20px, lightcoral 15px, lightcoral 40px, floralwhite 40px, floralwhite 45px, lightcoral 45px, lightcoral 50px, floralwhite 50px, floralwhite 80px ), repeating-linear-gradient( 90deg, floralwhite, floralwhite 10px, lightcoral 10px, lightcoral 15px, floralwhite 15px, floralwhite 20px, lightcoral 15px, lightcoral 40px, floralwhite 40px, floralwhite 45px, lightcoral 45px, lightcoral 50px, floralwhite 50px, floralwhite 80px ), #00000000;
      background-blend-mode: multiply;
  }