28

css で背景画像が繰り返される回数を設定する方法はありますか?

4

6 に答える 6

34

醜いハックは、(複数の背景を使用して)同じ画像を静的に複数回挿入する可能性があります。

たとえば、画像 (80x80) を水平方向に 3 回繰り返すには:

background-image: url('bg_texture.png'), 
                  url('bg_texture.png'),
                  url('bg_texture.png');
background-repeat: no-repeat, 
                   no-repeat,
                   no-repeat;
background-position: 0 top, 
                     80px top,
                     160px top;

注意: バージョン 9 未満の IE では動作しません ( source )。

于 2013-10-15T08:30:32.033 に答える
8

番号。

ボックスの絶対幅を設定することはできますが、画像を n 回繰り返す css オプションはありません。

于 2010-06-01T12:13:14.017 に答える
2

小さな jQuery と CSS を組み合わせて、目的を達成することができます。

画像 foo.png を水平方向に 3 回、垂直方向に 2 回表示したいとします。

CSS:

body {
    background: url('foo.png');
}

jQuery:

$(document).ready(function() {
    $('body').css('background-size', $(window).width()/3 + 'px ' + $(window).height()/2 + 'px');
});

さらに、同じコードを $(window).resize() 内に貼り付けて、動的な応答を得ることができます。

于 2016-09-18T03:38:37.737 に答える
1

はい！背景画像のサイズを設定できます: background-size: 20%, 20%; これにより、5回繰り返します。

于 2020-04-18T16:54:55.790 に答える