背景渐变或图像上的对角线纹理覆盖

Question

有没有一种只使用CSS就能复制以下纹理/填充的方法？我想在其他具有不同背景填充的容器上方使用相同类型的对角线，因此我希望可以在CSS中完成它，而不必创建模式并将其用作图像。您有任何想法吗？我猜这可能是类似于这样的东西：

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

有更好的解决方案吗？我不想在对角线上使用alpha/透明度时遇到问题，然后内容也变成透明的。 以下为需要翻译的三张图片及一个标题： 下面是已发布的解决方案。

- Jon

---

我在你的示例图像中没有看到对角线。 - Mark Schultheiss

它们很微弱，但是它们存在。按下Ctrl+，你就能看到它们。我已经编辑了我的帖子，并放大了版本。 - Jon

你需要获取渐变生成器...我想是这个网址：http://www.colorzilla.com/gradient-editor/ - sourcecode

对角线是主要问题。我知道如何获取梯度[我一直使用你发布的东西！：)]不过还是谢谢！ - Jon

Answer 1

您可以在按钮上使用多个背景图像，因此您可以使用background-size平铺顶部的条纹渐变来获得标准渐变效果。

.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;
}

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

- jonshot

---

我在jsFiddle中尝试了这个代码，但是没有看到背景。不确定我的做法有什么问题。http://jsfiddle.net/esj4p/ - Jon

@Jon，你的背景不对。使用此网站生成渐变背景：http://www.colorzilla.com/gradient-editor/。简单的工作演示：http://jsfiddle.net/enve/esj4p/1/。 - Idrizi.A

我想通了。正在编辑原帖。 - Jon

Answer 2

一个正确的解决方案：

jsFiddle：如果您没有看到对角线，请注意，这是因为jsFiddle不太喜欢从imgur托管的图像的外部链接。只需将imgur url复制并粘贴到另一个标签中以将其缓存，然后重新加载Fiddle即可。

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

position:relative

...到您的图像div，并将：

position:absolute

...应用到您的覆盖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;
}

- Jon