html - 背景渐变/图像上的对 Angular 线/纹理叠加

Question

有没有办法仅使用 CSS 复制以下纹理/填充？我想在具有不同背景填充的其他容器上方使用相同类型的对 Angular 线，因此我希望可能有一种方法可以在 CSS 中实现，而无需创建模式并将它们用作图像。

有什么办法可以做到这一点吗？我猜它可能必须是这样的:

<div id="gradientFill">
  <div class="linePattern">
    <!-- Content goes here -->
  </div>
</div>

有更好的解决方案吗？我不想在对 Angular 线上使用 alpha/透明度然后让内容也透明​​时遇到问题。

下面发布了解决方案。

Answer 1

你可以在按钮上使用多个背景图片，这样你就有了标准渐变，顶部的条纹渐变使用背景大小平铺:

.stripy {
    background-image:
      linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent), 
      linear-gradient(bottom, rgb(83,84,84) 0%, rgb(181,181,181) 100%);
    background-size:50px 50px, auto;
}

条纹有点粗，但通过一些实验应该可以得到你想要的。