CSS3 배경-size 속성
예
배경 이미지의 크기를 지정합니다 :
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
»시도
더 많은 예제는이 페이지의 하단에.
브라우저 지원
표의 수치 속성의 버전 번호를 먼저 지원 브라우저를 나타낸다.
즉시 디지털 -webkit- 이어 -ms- 또는 접두어 지원 전 -moz- 우선 브라우저 버전 번호 때문이다.
属性 | |||||
---|---|---|---|---|---|
background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
태그 정의 및 지침
배경 크기 속성은 배경 화상의 크기를 지정한다.
기본값 : | 자동 |
---|---|
상속 : | 아니 |
버전 : | CSS3 |
자바 스크립트 구문 : | 개체 object.style.backgroundSize = "60 픽셀 픽셀 범위" |
문법
background-size:length|percentage|cover|contain;
值 | 描述 |
---|---|
length | 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"atuo(自动)" |
percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)" |
cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
온라인 예
스트레치 배경 이미지
백그라운드 이미지가 완전히 콘텐츠 면적 스트레칭.
네 개의 가로 스트레칭 배경 이미지 이미지
도 4는 횡 배경 이미지 스트레칭.
관련 기사
CSS3 튜토리얼 : CSS3 배경