Thuộc tính kích thước nền CSS
Thí dụ
Chỉ định kích thước của hình nền bằng "tự động" và tính bằng pixel:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc background-sizetính chỉ định kích thước của hình nền.
Có bốn cú pháp khác nhau mà bạn có thể sử dụng với thuộc tính này: cú pháp từ khóa ("tự động", "bìa" và "chứa"), cú pháp một giá trị (đặt chiều rộng của hình ảnh (chiều cao trở thành "tự động"), cú pháp hai giá trị (giá trị đầu tiên: chiều rộng của hình ảnh, giá trị thứ hai: chiều cao) và cú pháp nhiều nền (phân tách bằng dấu phẩy).
| Giá trị mặc định: | Tự động |
|---|---|
| Thừa hưởng: | không |
| Hoạt hình: | Đúng. Đọc về hoạt hình |
| Phiên bản: | CSS3 |
| Cú pháp JavaScript: | đối tượng .style.backgroundSize = "60px 120px" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
| Property | |||||
|---|---|---|---|---|---|
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
Cú pháp CSS
background-size: auto|length|cover|contain|initial|inherit;
Giá trị tài sản
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The background image is displayed in its original size | |
| length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
| percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
| cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
| contain | Resize the background image to make sure the image is fully visible | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Các ví dụ khác
Thí dụ
Chỉ định kích thước của hình nền với phần trăm:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
Thí dụ
Chỉ định kích thước của hình nền có "bìa":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Thí dụ
Chỉ định kích thước của hình nền với "chứa":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Thí dụ
Ở đây chúng tôi có hai hình nền. Chúng tôi chỉ định kích thước của hình nền đầu tiên có "chứa" và hình nền thứ hai có "bìa":
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Thí dụ
Sử dụng các thuộc tính nền khác nhau để tạo hình ảnh "anh hùng":
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Các trang liên quan
Hướng dẫn CSS: Hình nền CSS
Tham chiếu DOM HTML: thuộc tính backgroundSize