css - 是否可以从屏幕左下角到右上角重复背景？

Question

我有一些图像模式，我希望它打击一个元素（例如身体）。我可以创建带有背景的伪元素并将其旋转 n 度，但这是一个糟糕的解决方案，因为我不知道块的比例。

有什么想法可以仅使用 CSS 来实现吗？

Answer 1

虽然没有一个 CSS 属性可以满足您的需求，但它可以被黑客入侵。

这有点难看，也不是真正的重复，但它可能对你有用。

HTML：

<div class="container"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

.container {
    width: 500px;
    height: 500px;
    background-image:
        url("http://i.stack.imgur.com/R5Ux6.png"),
        url("http://i.stack.imgur.com/R5Ux6.png"),
        url("http://i.stack.imgur.com/R5Ux6.png"),
        url("http://i.stack.imgur.com/R5Ux6.png"),
        url("http://i.stack.imgur.com/R5Ux6.png"),
        url("http://i.stack.imgur.com/R5Ux6.png"),
        url("http://i.stack.imgur.com/R5Ux6.png"),
        url("http://i.stack.imgur.com/R5Ux6.png"),
        url("http://i.stack.imgur.com/R5Ux6.png"),
        url("http://i.stack.imgur.com/R5Ux6.png"),
        url("http://i.stack.imgur.com/R5Ux6.png");
    background-position:
        0% 100%,
        10% 90%,
        20% 80%,
        30% 70%,
        40% 60%,
        50% 50%,
        60% 40%,
        70% 30%,
        80% 20%,
        90% 10%,
        100% 0%;
    background-repeat: no-repeat;
}​

http://jsfiddle.net/z4FD3/

在这里，我将相同的图像重复了 10 次。您可以根据需要执行多次，只需在位置之间添加更多行和更小的间隔（例如：0% 100%、2% 98%、4% 96%）。

Answer 2

为什么不制作一个看起来像上面的例子一样倾斜的图案