배경
英[ˈbækgraʊnd] 美[ˈbækˌɡraʊnd]
n.(그림 등) 배경색; 배경 정보; 배경 정보
size英z]美[ saəz]
n. 크기, 크기; 거대, 대량
vt. 크기 조정...; 특정 크기
3인칭 단수: Sizes 복수형: Sizes 현재분사: sizing 과거시제: ised 과거분사: ised
CSS 배경 크기 속성 통사론
배경 크기 속성을 어떻게 사용하나요?
background-size 속성은 배경 이미지의 크기를 설정할 수 있습니다. 구문: background-size: length|percentage|cover|contain; 길이 값 또는 백분율을 통해 이미지 크기를 설정하거나 표지 및 포함을 통해 이미지 크기를 조정합니다.
기능: 배경 이미지의 크기를 지정합니다.
구문: 배경 크기: 길이|백분율|커버|포함;
설명: length 배경 이미지의 높이와 너비를 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 설정하면 두 번째 값은 "auto"로 설정됩니다. 백분율은 배경 이미지의 너비와 높이를 상위 요소의 백분율로 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 설정하면 두 번째 값은 "auto"로 설정됩니다. Cover 배경 이미지가 배경 영역을 완전히 덮을 수 있도록 배경 이미지를 충분히 크게 확장합니다. 배경 이미지의 일부가 배경 앵커 영역에 표시되지 않을 수 있습니다. 포함 이미지의 너비와 높이가 콘텐츠 영역에 완전히 맞도록 이미지를 최대 크기로 확장합니다.
참고: IE9+, Firefox 4+, Opera, Chrome 및 Safari 5+는 배경 크기 속성을 지원합니다.
CSS 배경 크기 속성 예
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url('http://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="http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" alt="Flowers"></p>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요