CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法（画像と文章で詳しく解説）-CSSチュートリアル-php.cn

CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法（画像と文章で詳しく解説）

青灯夜游

リリース： 2018-10-11 10:52:24

オリジナル

21784 人が閲覧しました

CSSで背景画像のタイリングモードを設定するにはどうすればよいですか?この記事では、CSS で背景画像のタイルを設定する方法を紹介し、CSS で背景画像を水平方向にタイル状に配置するか、垂直方向にタイル状にタイル状に配置するか、またはタイル状に配置しないように設定する方法を説明します。困っている友人は参考にしていただければ幸いです。

background-image 属性を使用してページに背景画像を表示すると、画像サイズなどの理由により、背景画像が縦横に並べて表示される場合があります。その方法は以下のように表示されます。 :

CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法（画像と文章で詳しく解説）

しかし、場合によっては、そのような背景画像表示メソッドが必要なく、背景画像を 1 回だけ表示する (並べて表示しない) か、個別にタイルを実装したいだけです。水平方向に、垂直方向にタイルを並べます。これらのタイリングメソッドは CSS で実装できます。

では、CSS で背景画像のタイリング方法を設定するにはどうすればよいでしょうか?実は、cssのbackground-repeat属性で背景画像のタイリング方法を設定することができます。 background-repeat 属性を使用すると、次の属性値を設定することにより、背景画像を水平方向、垂直方向にタイル状に並べたり、タイル状に並べたりしないようにしたり、完全に並べたりすることができます。

繰り返し: デフォルト値。背景画像が垂直方向と水平方向に並べて表示されるように設定します。つまり、完全に並べて表示されます。

repeat-x: 背景画像を水平に並べて表示するように設定します。

repeat-y: 背景画像を縦に並べて表示するように設定します。

no-repeat: 背景画像を並べて表示しないように設定します。つまり、1 回だけ表示されます。

簡単なコード例を使用して、これらの属性値を実装する方法を理解しましょう:

1, repeat 背景画像を完全にタイル表示するように設定します

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.demo{
				width: 600px;
				height: 540px;
				margin: 50px auto;
				background-image: url(CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法（画像と文章で詳しく解説）);
				background-repeat:repeat;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法（画像と文章で詳しく解説）

##2. no-repeat は背景画像をタイル表示しないように設定します

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.demo{
				width: 600px;
				height: 540px;
				margin: 50px auto;
				background-image: url(CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法（画像と文章で詳しく解説）);
				background-repeat:no-repeat;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法（画像と文章で詳しく解説）

3、

repeat-x 背景画像を水平方向に並べて設定します

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.demo{
				width: 600px;
				height: 540px;
				margin: 50px auto;
				background-image: url(CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法（画像と文章で詳しく解説）);
				background-repeat:repeat-x;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法（画像と文章で詳しく解説）

repeat-y 背景画像を縦方向に並べて設定します

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.demo{
				width: 600px;
				height: 540px;
				margin: 50px auto;
				background-image: url(CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法（画像と文章で詳しく解説）);
				background-repeat:repeat-y;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法（画像と文章で詳しく解説）