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

CSS では、background-repeat 属性を使用して画像の並べ方を設定できます。値が "repeat" の場合は背景を完全に並べることができ、"repeat-x" の場合は背景を完全に並べることができます。 「repeat」の場合は縦に並べて表示できますが、「-y」の場合は縦に並べて表示できますが、「no-repeat」の場合は並べて表示できません（画像は1回のみ表示されます）。

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

CSS では、background-repeat 属性を使用して画像の並べ方を設定できます。

background-repeat 属性は、画像のタイル モードを定義し、背景画像を繰り返すかどうか、および繰り返す方法を設定します。

#background-repeat 属性では 4 つのタイル モードを設定できます: #1。値が「repeat」の場合、背景を完全にタイル表示できます

repeat

: デフォルト。背景画像が縦横に繰り返し表示されます。 <pre class="brush:html;toolbar:false">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; div { width: 500px; height: 500px; border: 2px solid red; background-image: url(img/nz.png); background-repeat:repeat; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div &gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre>

2. 値が "repeat-x" の場合、水平方向に並べて表示できます。

repeat-x: 水平方向の位置のみを繰り返します。背景画像

div {
	width: 500px;
	height: 500px;
	border: 2px solid red;
	background-image: url(img/nz.png);
	background-repeat:repeat-x;
}

3. 値が「repeat-y」の場合、縦方向に並べて表示できます

repeat-y: 縦方向の位置のみが表示されます。背景画像を繰り返します

div {
	width: 500px;
	height: 500px;
	border: 2px solid red;
	background-image: url(img/nz.png);
	background-repeat:repeat-y;
}

4. 値が「no-repeat」の場合、タイル表示されません

no-repeat: 背景画像1 回のみ表示されます

div {
	width: 500px;
	height: 500px;
	border: 2px solid red;
	background-image: url(img/nz.png);
	background-repeat:no-repeat;
}

(学習ビデオ共有:

css ビデオ チュートリアル

)

以上がCSSで画像のタイリングモードを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。