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

Question

我有一些图像图案，我希望它能击中一个元素(例如 body )。我可以创建带有背景的伪元素并将其旋转 n 度，但这是一个糟糕的解决方案，因为我不知道 block 的比例。

有什么想法可以仅使用 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%)。