HTML 배경 이미지의 타일링 모드를 설정하는 방법-프런트엔드 Q&A-php.cn

HTML 배경 이미지의 타일링 모드를 설정하는 방법

青灯夜游

풀어 주다： 2023-01-06 11:16:26

원래의

12330명이 탐색했습니다.

HTML에서는 background-repeat 속성을 사용하여 배경 이미지의 타일링 방법을 설정할 수 있습니다. 속성 값을 "repeat"로 설정하면 수직 및 수평으로 타일링할 수 있고 "repeat-x"를 사용하면 타일링할 수 있습니다. 사용하면 수평으로 타일링할 수 있습니다. "repeat-y"는 수직으로 타일링할 수 있고, "no-repeat"는 타일링할 수 없습니다.

HTML 배경 이미지의 타일링 모드를 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, 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>

로그인 후 복사

Rendering:

HTML 배경 이미지의 타일링 모드를 설정하는 방법

설명:

Background-repeat 속성은 이미지의 타일링 모드를 정의하는 배경 이미지 반복 여부와 방법을 설정합니다. .

기본적으로 배경 이미지는 가로 및 세로로 반복됩니다.

속성 값:

값	설명
repeat	기본값. 배경 이미지가 수직 및 수평으로 반복됩니다.
repeat-x	배경 이미지가 가로로 반복됩니다.
repeat-y	배경 이미지가 세로로 반복됩니다.
no-repeat	배경 이미지는 한 번만 표시됩니다.