배경 크기 속성을 사용하는 방법-CSS 튜토리얼-php.cn

배경 크기 속성을 사용하는 방법

青灯夜游

풀어 주다： 2019-01-30 14:06:22

원래의

10492명이 탐색했습니다.

background-size 속성은 배경 이미지의 크기를 설정하는 데 사용됩니다. 길이 값이나 백분율을 통해 이미지 크기를 설정하거나, 표지 및 포함을 사용하여 이미지를 늘릴 수 있습니다.

배경 크기 속성을 사용하는 방법

CSS 배경 크기 속성

기능: 배경 이미지의 크기를 지정합니다.

참고: CSS3 이전에는 배경 이미지의 크기가 이미지의 실제 크기에 따라 결정되었습니다. CSS3에서는 배경 이미지의 크기를 지정할 수 있어 다양한 환경에서 배경 이미지를 재사용할 수 있습니다.

구문:

background-size: length|percentage|cover|contain;

로그인 후 복사

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

CSS background-size 속성 사용 예시

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background:url(https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}

</style>
</head>

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

<p>原始图片：<img src="https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg" alt="Flowers"></p>

</body>
</html>

로그인 후 복사

Rendering:

배경 크기 속성을 사용하는 방법