Thuộc tính CSS
background-size =8 đặt kích thước cho hình nền của phần tử. Hình ảnh có thể được để ở kích thước tự nhiên, kéo dài hoặc hạn chế để phù hợp với không gian có sẵn
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
Các khoảng trống không được bao phủ bởi hình nền được lấp đầy bằng thuộc tính
background-size =9 và màu nền sẽ hiển thị phía sau hình nền có độ trong suốt/mờ
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
/* Keyword values */
background-size: cover;
background-size: contain;
/* One-value syntax */
/* the width of the image [height becomes 'auto'] */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* Global values */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: revert-layer;
background-size: unset;
Thuộc tính
background-size =8 được chỉ định theo một trong các cách sau
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
- Sử dụng các giá trị từ khóa
background-size =
1 hoặc
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =
2
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
- Chỉ sử dụng giá trị chiều rộng, trong trường hợp đó, chiều cao mặc định là
background-size =
3
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
- Sử dụng cả giá trị chiều rộng và chiều cao, trong trường hợp đó, giá trị đầu tiên đặt chiều rộng và giá trị thứ hai đặt chiều cao. Mỗi giá trị có thể là
background-size =
0,
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =
1 hoặc
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =
3
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
Để chỉ định kích thước của nhiều hình nền, hãy phân tách giá trị cho từng hình bằng dấu phẩy
background-size =1
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
Chia tỷ lệ hình ảnh càng lớn càng tốt trong vùng chứa của nó mà không cắt xén hoặc kéo dài hình ảnh. Nếu vùng chứa lớn hơn hình ảnh, điều này sẽ dẫn đến việc xếp hình ảnh, trừ khi thuộc tính
background-size =4 được đặt thành
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =5
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =2
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
Chia tỷ lệ hình ảnh [trong khi vẫn giữ nguyên tỷ lệ của nó] thành kích thước nhỏ nhất có thể để lấp đầy vùng chứa [nghĩa là. cả chiều cao và chiều rộng của nó bao phủ hoàn toàn vùng chứa], không để lại khoảng trống. Nếu tỷ lệ của nền khác với phần tử, hình ảnh sẽ được cắt theo chiều dọc hoặc chiều ngang
background-size =3
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
Chia tỷ lệ hình nền theo hướng tương ứng sao cho tỷ lệ nội tại của nó được duy trì
background-size =0
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
Kéo dài hình ảnh theo kích thước tương ứng với độ dài đã chỉ định. Giá trị âm không được phép
background-size =1
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
Kéo dài hình ảnh theo kích thước tương ứng theo tỷ lệ phần trăm đã chỉ định của khu vực định vị nền. Vùng định vị nền được xác định bởi giá trị của
Việc tính toán các giá trị phụ thuộc vào kích thước nội tại của hình ảnh [chiều rộng và chiều cao] và tỷ lệ nội tại [tỷ lệ chiều rộng trên chiều cao]. Các thuộc tính này như sau
- Một hình ảnh bitmap [chẳng hạn như JPG] luôn có kích thước và tỷ lệ nội tại
- Một hình ảnh vector [chẳng hạn như SVG] không nhất thiết phải có kích thước nội tại. Nếu nó có cả kích thước nội tại ngang và dọc, thì nó cũng có tỷ lệ nội tại. Nếu nó không có kích thước hoặc chỉ có một kích thước, nó có thể có hoặc không có tỷ lệ
- CSS
3 không có kích thước nội tại hoặc tỷ lệ nội tại - Hình nền được tạo bằng hàm
4 sử dụng kích thước và tỷ lệ nội tại của phần tử tạo
Ghi chú. Trong Gecko, hình nền được tạo bằng hàm
Dựa trên kích thước và tỷ lệ nội tại, kích thước hiển thị của hình nền được tính như sau
- Nếu cả hai thành phần của
background-size =
8 được chỉ định và không phải là
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =
3. Hình nền được hiển thị ở kích thước đã chỉ định
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
- Nếu
background-size =
8 là
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =
1 hoặc
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =
2. Trong khi giữ nguyên tỷ lệ nội tại của nó, hình ảnh được hiển thị ở kích thước lớn nhất chứa bên trong hoặc bao phủ khu vực định vị nền. Nếu hình ảnh không có tỷ lệ nội tại, thì nó được hiển thị ở kích thước của khu vực định vị nền
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
- Nếu
background-size =
8 là
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =
3 hoặc
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =
33
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
- Nếu hình ảnh có cả kích thước bên trong ngang và dọc, thì nó sẽ được hiển thị ở kích thước đó
- Nếu hình ảnh không có kích thước nội tại và không có tỷ lệ nội tại, nó sẽ được hiển thị ở kích thước của khu vực định vị nền
- Nếu hình ảnh không có kích thước nội tại nhưng có tỷ lệ nội tại, nó sẽ hiển thị như thể _____21 đã được chỉ định thay thế
- Nếu hình ảnh chỉ có một chiều nội tại và có tỷ lệ nội tại, nó sẽ được hiển thị ở kích thước tương ứng với một chiều đó. Thứ nguyên khác được tính bằng cách sử dụng thứ nguyên được chỉ định và tỷ lệ nội tại
- Nếu hình ảnh chỉ có một kích thước nội tại nhưng không có tỷ lệ nội tại, nó sẽ được hiển thị bằng cách sử dụng kích thước đã chỉ định và kích thước khác của khu vực định vị nền
Ghi chú. Hình ảnh SVG có thuộc tính
background-size =
35 mặc định tương đương với
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =
1;
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
- Nếu
background-size =
8 có một thành phần
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =
3 và một thành phần không phải ______23
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
- Nếu hình ảnh có tỷ lệ nội tại, nó sẽ được kéo dài theo kích thước đã chỉ định. Thứ nguyên không xác định được tính bằng cách sử dụng thứ nguyên đã chỉ định và tỷ lệ nội tại
- Nếu hình ảnh không có tỷ lệ nội tại, nó sẽ được kéo dài theo kích thước đã chỉ định. Kích thước không xác định được tính bằng kích thước bên trong tương ứng của hình ảnh, nếu có. Nếu không có kích thước nội tại như vậy, nó sẽ trở thành kích thước tương ứng của khu vực định vị nền
Ghi chú. Kích thước nền cho hình ảnh vector thiếu kích thước hoặc tỷ lệ nội tại chưa được triển khai đầy đủ trong tất cả các trình duyệt. Hãy cẩn thận khi dựa vào hành vi được mô tả ở trên và thử nghiệm trên nhiều trình duyệt để đảm bảo kết quả có thể chấp nhận được
Giá trị ban đầu ______ 133 Áp dụng cho tất cả các phần tử. Nó cũng áp dụng cho
background-size =83 và
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =84. Kế thừa không có Tỷ lệ phần trăm tương đối với khu vực định vị nền Giá trị được tính toán như đã chỉ định nhưng với độ dài tương đối được chuyển đổi thành độ dài tuyệt đối Loại hoạt ảnh danh sách lặp lại của danh sách độ dài, tỷ lệ phần trăm hoặc calc đơn giản
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
background-size =
#
=
[ | auto ]{1,2} |
cover |
contain
=
|
Hãy xem xét một hình ảnh lớn, hình ảnh logo Firefox 2982x2808. Chúng tôi muốn xếp bốn bản sao của hình ảnh này thành một phần tử 300x300 pixel. Để làm điều này, chúng ta có thể sử dụng giá trị cố định
background-size =8 là 150 pixel
#
=
[ | auto ]{1,2} |
cover |
contain
=
|