CSSで背景画像のタイリングモードを設定する方法-フロントエンドQ&A-php.cn

CSSで背景画像のタイリングモードを設定する方法

青灯夜游

リリース： 2023-01-11 09:22:52

オリジナル

16315 人が閲覧しました

CSSでbackground-repeat属性を使用すると、背景画像の並べ方を設定できます。値が「repeat」の場合、縦方向と横方向に繰り返すことができます。「repeat」の場合、「-x」は横方向に繰り返し可能、「repeat-y」は縦方向に繰り返し可能、「no-repeat」は繰り返し不可。

CSSで背景画像のタイリングモードを設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

デフォルトでは、背景画像がコンテナ全体を埋めるのに十分でない場合、コンテナ全体を埋めるために水平方向と垂直方向に背景画像が繰り返されます。ただし、背景画像を 1 回だけ表示したり、特定の方向にのみ繰り返し表示したい場合もあります。

#repeatデフォルトでは、画像はコンテナを埋めるために水平方向と垂直方向の両方で繰り返されますrepeat-x画像はコンテナを埋めるために水平方向にのみ繰り返しますrepeat-y画像は水平方向にのみ繰り返しますコンテナを埋める垂直方向 space画像はコンテナを埋めるために両端で整列して繰り返され、余分なスペースは空白に置き換えられます#round#no-repeat繰り返しは行わず、画像は 1 回だけ表示されます

デフォルトでは、背景画像のパディング領域は要素のパディングボックス領域であり、背景画像がタイル化された後、そのパディング領域は要素のボーダーボックス領域になります。要素。

background-repeat 属性には 2 つのパラメータが必要です。2 つのパラメータが指定された場合、最初のパラメータは水平方向に使用され、2 番目のパラメータは垂直方向に使用されます。引数が 1 つだけ指定された場合、それは水平方向と垂直方向の両方に使用されます。特殊な値repeat-xとrepeat-yを除き、repeat-xはrepeat no-repeatと同等、repeat-yはno-repeatrepeatと同等であるため、repeat-xとrepeat-yは同等です。 2 つのパラメータ値を指定します。

さまざまな値の下でのbackground-repeat属性のパフォーマンスを明確に理解するために、ここでは各値に対してクラスを定義し、それらをそれぞれコンテナに適用します。

HTML コードは次のとおりです:

<div class="no-repeat"></div>
<div class="repeat-x"></div>
<div class="repeat-y"></div>
<div class="repeat"></div>
<div class="space"></div>
<div class="round"></div>
————————————————
版权声明：本文为CSDN博主「ixygj197875」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ixygj197875/article/details/79333143

ログイン後にコピー

CSS コードは次のとおりです:

div { 
 width: 100px; 
 height: 120px;
 border: 1px dashed #888;
 background-image: url(bg.png);
}
.repeat-x {
 background-repeat: repeat-x;
}
.repeat-y {
 background-repeat: repeat-y;
}
.repeat {
 background-repeat: repeat;
}
.space {
 background-repeat: space;
}
.round {
 background-repeat: round;
}
.no-repeat {
 background-repeat: no-repeat;
}

ログイン後にコピー

上記のコードでは、コンテナの幅と高さは 100px と 120px です。背景画像の幅と高さは両方とも 40px です。背景画像の範囲を明確にするために、コンテナに 1px の点線枠を追加し、背景画像に 1px の黒枠を追加します。実行結果を図 4-27 に示します。

CSSで背景画像のタイリングモードを設定する方法
background-repeat 属性のレンダリング

上の図からわかるように、画像は次のように繰り返されます。元のサイズでコンテナを満たすことができます。水平方向では、コンテナの幅が背景画像の幅の整数倍ではない場合: 値がスペースの場合、余分なスペースは空白で埋められます。値が丸の場合、背景画像は拡大縮小されます。 ; 他の値の場合、最後の画像画像が不完全になる可能性があります。垂直方向も同様です。

関連する推奨事項: 「css ビデオチュートリアル」

background-repeat 属性の値と意味
属性値	意味




画像はコンテナを埋めるために両端まで整列して繰り返され、画像を引き伸ばすことで余分なスペースが埋められます