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

上記の例のように斜めに見えるパターンを作ってみませんか？