background-blend-mode实现的纹理背景效果示意实例页面

展示

代码

• HTML：

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

• CSS：

  .pattern {
      width: 300px; height: 180px;
      margin: auto;
      background: repeating-linear-gradient(floralwhite 20px, lightcoral 0 40px, floralwhite 0 60px),
          repeating-linear-gradient(90deg, floralwhite 20px, lightcoral 0 40px, floralwhite 0 60px);
      background-blend-mode: multiply;
  }