ホームページ > 記事 > ウェブフロントエンド > CSSで背景画像のタイリングモードを設定するにはどうすればよいですか? CSSで背景画像のタイリングを設定する方法（画像と文章で詳しく解説）

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

青灯夜游オリジナル: 2018-10-11 10:52:2521794ブラウズ

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

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

しかし、場合によっては、そのような背景画像表示メソッドが必要なく、背景画像を 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で背景画像のタイリングを設定する方法（画像と文章で詳しく解説）

background-repeat 属性に関しては、次の

手順 :

background-image で定義された元の画像から繰り返します。最初に元の画像を定義する必要があります。background-repeat 属性を使用してタイリング方法を設定します。

背景画像の位置は、background-position プロパティに従って設定されます。背景位置プロパティが指定されていない場合、画像は要素の左上隅に配置されます。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS ビデオチュートリアル、 CSS3 ビデオチュートリアルをご覧ください。

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

関連記事