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

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

青灯夜游

リリース： 2023-01-06 11:16:26

オリジナル

12369 人が閲覧しました

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

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

このチュートリアルの動作環境: 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背景画像のタイリングモードを設定する方法