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

展示

代码

• HTML：

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

• CSS：

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