对角线/纹理覆盖在背景渐变/图像上

Question

有没有办法只使用CSS复制以下纹理/填充？我希望在不同背景填充的顶部其他容器上使用相同类型的对角线，所以我希望可以在CSS中使用它来创建模式并将其用作图像。

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

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

有更好的解决方案吗？我不想在对角线上使用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;
}

条纹有点厚，但经过一些实验，应该可以得到你想要的东西。

Answer 2

正确的解决方案：

jsFiddle：如果你没有看到对角线，那是因为jsFiddle并不真正喜欢来自imgur托管图像的外部链接。只需将imgur url复制并粘贴到另一个点按，即可将其放入缓存中，然后重新加载小提琴。

解决方案的关键是颜色背景的相对定位，以及纹理/线条覆盖的绝对定位。对于此帖子的未来访问者，如果要在图像上叠加纹理，请应用：

  

位置：相对于

...到你的形象div，并且：

  

位置：绝对

...到你的叠加div。

<div id="alert">
    Text goes here!
    <div class="lines"></div>
</div>

---

#alert {
    position:relative;
    padding:10px;
    box-shadow:0px 1px 1px #000,  0px 1px 1px #F5BFB1 inset;

    background: #ea765a; /* Old browsers */
    background: -moz-linear-gradient(top,  #ea765a 0%, #d2583b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea765a), color-stop(100%,#d2583b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ea765a 0%,#d2583b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ea765a 0%,#d2583b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ea765a 0%,#d2583b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ea765a 0%,#d2583b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea765a', endColorstr='#d2583b',GradientType=0 ); /* IE6-9 */
}

.lines {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:url(../img/lines.png);
    opacity:0.05;
}