Thuộc tính kích thước nền CSS
Ví 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;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính background-size
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 ("auto", "cover" và "contain"), 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 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 (được 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 Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.backgroundSize="60px 120px" Hãy dùng thử |
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 là -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 | Demo |
---|---|---|
auto | Default value. The background image is displayed in its original size | Demo ❯ |
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 | Demo ❯ |
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" | Demo ❯ |
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 | Demo ❯ |
contain | Resize the background image to make sure the image is fully visible | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Chỉ định kích thước của hình nền theo 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%;
}
Hãy tự mình thử »Ví dụ
Chỉ định kích thước của hình nền bằng "bìa":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Hãy tự mình thử »Ví dụ
Chỉ định kích thước của hình nền bằng "contain":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Hãy tự mình thử »Ví dụ
Ở đây chúng ta 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 bằng "contain" và hình nền thứ hai có "cover":
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Hãy tự mình thử »Ví 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 */
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Nền CSS
Tham chiếu DOM HTML: thuộc tính BackgroundSize