CSS에서 배경 이미지의 타일링 모드를 설정하는 방법은 무엇입니까? CSS에서 배경 이미지 타일링을 설정하는 방법(그림과 텍스트로 자세한 설명)-CSS 튜토리얼-php.cn

CSS에서 배경 이미지의 타일링 모드를 설정하는 방법은 무엇입니까? CSS에서 배경 이미지 타일링을 설정하는 방법(그림과 텍스트로 자세한 설명)

青灯夜游

풀어 주다： 2018-10-11 10:52:24

원래의

21809명이 탐색했습니다.

CSS에서 배경 이미지의 타일링 모드를 설정하는 방법은 무엇입니까? 이번 글에서는 CSS에서 배경 이미지 타일링을 설정하는 방법을 소개하고, CSS에서 배경 이미지를 가로 타일링, 세로 타일링, 타일링 안 하도록 설정하는 방법을 알려드리겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

배경 이미지 속성을 사용하여 페이지에 배경 이미지를 표시할 때 다음과 같이 몇 가지 이유(예: 이미지 크기)로 인해 배경 이미지가 가로 및 세로 방향으로 동시에 표시될 수 있습니다. 그림:

CSS에서 배경 이미지의 타일링 모드를 설정하는 방법은 무엇입니까? CSS에서 배경 이미지 타일링을 설정하는 방법(그림과 텍스트로 자세한 설명)

하지만 때로는 이러한 배경 이미지 표시 방법이 필요하지 않을 때도 있습니다. 배경 이미지를 한 번만 표시하거나(타일링하지 않음) 가로 타일과 세로 타일을 별도로 구현하고 싶을 때도 있습니다. CSS를 사용하여 이러한 타일링 방법을 구현할 수 있습니다!

그렇다면 CSS에서 배경 이미지의 타일링 방법을 설정하는 방법은 무엇입니까? 실제로 CSS background-repeat 속성은 배경 이미지의 타일링 방법을 설정할 수 있습니다. background-repeat 속성은 다음 속성 값을 설정하여 배경 이미지를 가로, 세로 또는 완전히 타일링하지 않는 데 사용할 수 있습니다.

repeat: 기본값은 배경 이미지가 수직 및 수평으로 타일링되도록 설정합니다. 즉, 완전히 타일링됩니다.

repeat-x: 배경 이미지를 가로로 타일링하도록 설정합니다.

repeat-y: 배경 이미지가 수직으로 타일링되도록 설정합니다.

no-repeat: 배경 이미지가 타일링되지 않도록 설정합니다. 즉, 한 번만 표시됩니다.

간단한 코드 예제를 통해 이러한 속성 값을 구현하는 방법을 살펴보겠습니다.

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>

로그인 후 복사

Rendering:

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>

로그인 후 복사

Rendering:

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>

로그인 후 복사

Rendering:

CSS에서 배경 이미지의 타일링 모드를 설정하는 방법은 무엇입니까? CSS에서 배경 이미지 타일링을 설정하는 방법(그림과 텍스트로 자세한 설명)

4, 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>

로그인 후 복사

Rendering:

CSS에서 배경 이미지의 타일링 모드를 설정하는 방법은 무엇입니까? CSS에서 배경 이미지 타일링을 설정하는 방법(그림과 텍스트로 자세한 설명)