3

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

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

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

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

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

解决方案发布如下。

4

2 回答 2

0

您可以在按钮上使用多个背景图像，因此您可以使用背景大小平铺顶部带有条纹渐变的标准渐变：

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

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

于 2013-01-07T17:39:11.980 回答
0

正确的解决方案：

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

解决的关键是颜色背景的相对定位，以及纹理/线条叠加的绝对定位。对于这篇文章的未来访问者，如果您想在图像上叠加纹理，请应用：

位置：相对

...到您的图像 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;
}
于 2013-01-07T18:05:07.640 回答