ホームページ > 記事 > ウェブフロントエンド > HTML背景画像のタイリングモードを設定する方法

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

青灯夜游オリジナル: 2021-06-03 16:14:5112342ブラウズ

HTML では、background-repeat 属性を使用して背景画像の並べ方を設定できます。属性値が "repeat" に設定されている場合は縦横に並べて表示でき、"repeat" の場合は背景画像の並べ方を設定できます。 -x" を使用すると、縦横に並べて表示できます。横方向にタイル、"repeat-y" では縦方向に並べることができ、"no-repeat" では並べることができません。

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

html背景画像設定タイリング方法

<!DOCTYPE html>
<html>
	<head>

		<style type="text/css">
			div{
				border: 1px solid #000fff;
				height: 200px;
				background-image: url(img/1.jpg);
				margin-bottom:10px ;
			}
			#content1 {
				background-repeat: repeat;
			}
			#content2 {
				background-repeat: repeat-x;
			}
			#content3 {
				background-repeat: repeat-y;
			}
			#content4 {
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<div id="content1"></div>
		<div id="content2"></div>
		<div id="content3"></div>
		<div id="content4"></div>
	</body>

	</html>

レンダリング:

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

説明:

background-repeat 属性は、背景画像を繰り返すかどうかとその方法を設定し、画像のタイリングモードを定義します。

デフォルトでは、背景画像は水平方向と垂直方向に繰り返されます。

属性値:

#repeat-x背景画像が水平方向に繰り返し表示されます。背景画像が垂直方向に繰り返し表示されます。 #no-repeat背景画像は 1 回だけ表示されます。 css ビデオチュートリアル)

値	説明
repeat## ＃＃＃＃デフォルト。背景画像が縦横に繰り返し表示されます。
	#repeat-y

	(学習ビデオ共有:

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLにヘッダーを設定する方法次の記事：HTMLにヘッダーを設定する方法

続きを見る