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

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

青灯夜游원래의: 2018-10-11 10:52:2521697검색

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에서 배경 이미지 타일링을 설정하는 방법(그림과 텍스트로 자세한 설명)

background-repeat 속성에는 다음과 같은 지침이 있습니다.

원본 이미지에서 반복합니다. background-image로 정의됩니다. 필수입니다. 먼저 원본 이미지를 정의한 다음 background-repeat 속성을 사용하여 타일링 방법을 설정합니다.

배경 이미지의 위치는 background-position 속성에 따라 설정됩니다. background-position 속성을 지정하지 않으면 이미지는 요소의 왼쪽 상단에 배치됩니다.

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 CSS 비디오 튜토리얼 , CSS3 비디오 튜토리얼 을 방문하세요!

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

관련 기사