web-dev-qa-db-ja.com

cssの背景画像を設定された回数繰り返します

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

cssrepeat
24
Moudy

醜いハッキングは、同じ画像を複数回（静的に）挿入する可能性があります（ 複数の背景 を使用）：

例えば。画像（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;

注意：IE 9バージョン（ ソース ）では動作しません。

29
franzlorenzon

番号。

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

8
jantimon

小さな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（）内に同じコードを貼り付けて、動的な応答を取得することもできます。

2
Ryan Dsouza

@gcbenisonが述べたように、イメージを厳密にx回繰り返すことはしませんが、background-repeat: spaceプロパティまたは同様にbackground-position: roundを使用して、これらのいずれかをbackground-sizeと組み合わせて、背景画像の設定された繰り返し数が表示され、おそらくラッパーのサイズを調整して調整します。

spaceとrepeatはどちらも、画像全体を表示できる限り、背景画像を無限に繰り返しますが、残りの部分については、spaceは画像間にギャップを追加し、roundは画像をスケーリングします。簡単に言えば、背景画像が垂直に3.342倍に収まる場合、spaceとroundの両方が画像を3回表示し、spaceは繰り返される各画像の間にギャップを追加し、round画像を拡大して（または必要に応じて縮小して）ギャップを埋めます。

このように画像を5回繰り返したい場合、各画像の幅が20pxで、間隔が5pxである場合は、次のようにするだけです。

.star-rating {
    width: 120px;
    background-image: url('example.jpg');
    background-repeat: space;
    background-size: 20px auto;
    }

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

もう1つのオプション（幅を設定できない場合）は、@ franzlorenzonのソリューションを使用し、複数の背景CSSプロパティを使用して背景のx回数を宣言するだけです。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

さらに、次のように@forループを作成することにより、SASSを使用して複数行を入力する手間を省くことができます。

$image_count: 5;
$image_url: 'url(star.svg)';
$image_position: '0';

@for $i from 1 through ($image_count - 1) {
    $image_url: #{ $image_url+', '+$image_url };
    $image_position: #{ $image_position+', '+($i * (100% / $image_count)) };
}

.star-rating {
    background-image: $image_url;
    background-position: $image_position;
    background-size: 20px;
    background-repeat: no-repeat;
}

これにより、背景画像がすべて等間隔で生成されます。さらに、間隔を固定するために($i * (100% / $image_count))を($i * VALUE)に自由に変更してください。

0
Oliver

この質問の元々の動機はわかりませんが、背景画像のコピーの整数個のみが表示されるようにする方法を探していることがわかりました（つまり、繰り返される背景画像のセットの最後のメンバーをトリミングしないでください）。これは、background-repeat: spaceプロパティ。

0
gcbenison