CSS 배경 크기 속성을 사용하는 방법
- 藏色散人원래의
- 2019-05-29 10:47:294562검색
css background-size 속성은 배경 이미지의 크기를 설정할 수 있습니다. 구문: background-size: length|percentage|cover|contain; 길이 값 또는 백분율을 통해 이미지 크기를 설정하거나 표지 및 포함을 통해 이미지 크기를 조정합니다.
CSS 배경 크기 속성을 사용하는 방법은 무엇입니까?
기능: 배경 이미지의 크기를 지정합니다.
Syntax:
background-size: length|percentage|cover|contain;
Description:
length 배경 이미지의 높이와 너비를 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 설정하면 두 번째 값은 "auto"로 설정됩니다. 백분율은 배경 이미지의 너비와 높이를 상위 요소의 백분율로 설정합니다.
첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 설정하면 두 번째 값은 "auto"로 설정됩니다. Cover 배경 이미지가 배경 영역을 완전히 덮을 수 있도록 배경 이미지를 충분히 크게 확장합니다. 배경 이미지의 일부가 배경 앵커 영역에 표시되지 않을 수 있습니다. 포함 이미지의 너비와 높이가 콘텐츠 영역에 완전히 맞도록 이미지를 최대 크기로 확장합니다.
참고: IE9+, Firefox 4+, Opera, Chrome 및 Safari 5+는 배경 크기 속성을 지원합니다.
css 배경 크기 속성 사용 예
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url('https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
background-size:100px 63px;
-moz-background-size:100px 63px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" alt="Flowers"></p>
</body>
</html>효과 출력:
#🎜🎜 #
위 내용은 CSS 배경 크기 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!