css - CSS 背景の繰り返し

Question

幅と高さが 1700 x 1129px の画像があるとします。この画像が繰り返されていることがわからないように、この画像を繰り返すことができる最善の方法は何ですか. 使用してみrepeat-yましたが、別のグラフィックのように見えます。

Answer 1

cssとは何の関係もありません。あなたの画像では繰り返しが許可されていません。悪い影響を与えずに画像を繰り返すには、繰り返したい方向で画像の開始点と終了点が同じでなければなりません。

Answer 2

非常に簡単なトリックがあります：画像の側面を静的な色（例では黒や濃い茶色など）で終了し、背景画像を中央に配置し、背景を色で塗りつぶします

body { background: black url(image.png) no-repeat center top; }

Answer 3

シームレスな画像を作成する必要があります。つまり、画像の上端と下端、および左端と右端が反対側の端と完全に一致しているため、角度や色の変化が見えません。使用するCSSアプローチbackground-repeatはまったく問題ありません。

これは、主に 3D の世界の CG でよく使用されます。画像をシームレスにするためのチュートリアルはたくさんあります。

Answer 4

プロパティを使用background-sizeします。

水平に繰り返すことで偽装できると思われる背景がある場合は、次の手順を実行します。

background-size: 50% 100%; background-repeat: repeat-x;

垂直に繰り返すことで背景を偽装できると思われる場合は、次の手順を実行します。

background-size: 100% 50%; background-repeat: repeat-y;