CSS에서 배경 이미지의 크기를 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 배경 이미지의 크기를 설정하는 방법

青灯夜游

풀어 주다： 2023-01-05 16:10:22

원래의

22625명이 탐색했습니다.

CSS에서는 background-size 속성을 사용하여 배경 이미지의 크기를 설정할 수 있습니다. 이 속성은 배경 이미지의 크기를 지정할 수 있습니다. 구문 형식은 "배경 크기: 길이 단위의 숫자 값 | 백분율 값"입니다. | 표지 | 포함;".

CSS에서 배경 이미지의 크기를 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서는 background-size 속성을 사용하여 배경 이미지의 크기를 설정할 수 있습니다. 길이 값이나 백분율로 표시할 수 있으며 표지 및 포함을 통해 이미지 크기를 조정할 수도 있습니다.

background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:cover;/* 将背景图片等比缩放填满整个容器 */
background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

로그인 후 복사

속성 값:

Value	Description
length	배경 이미지의 높이와 너비를 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 설정하면 두 번째 값은 "auto"로 설정됩니다.
percentage	배경 이미지의 너비와 높이를 상위 요소의 백분율로 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 설정하면 두 번째 값은 "auto"로 설정됩니다.
cover	배경 이미지가 배경 영역을 완전히 덮을 수 있도록 배경 이미지를 충분히 크게 확장하세요. 배경 이미지의 일부가 배경 위치 지정 영역에 표시되지 않을 수 있습니다.
contain	이미지의 너비와 높이가 콘텐츠 영역에 완전히 맞도록 이미지를 최대 크기로 확장하세요.

코드 샘플:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			body {
				background: url(img/5.jpg);
				background-size: 100px 100px;
				-moz-background-size: 100px 100px;
				/* 老版本的 Firefox */
				background-repeat: no-repeat;
				padding-top: 80px;
			}
		</style>
	</head>

	<body>
		<p>上面是缩小的背景图片。</p>

		<p>原始图片：<br />
			<img src="img/5.jpg" alt="Flowers"></p>

	</body>

</html>

로그인 후 복사

렌더링:

CSS에서 배경 이미지의 크기를 설정하는 방법