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

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

为什么不像上面的例子那样制作一个看似偏斜的模式