Thuộc tính background-size
Định nghĩa và sử dụng Thuộc tính background trong css3 dùng để định dạng các dạng background ngoài dạng đã được định nghĩa ở css2. Cấu trúc tag { thuộc tính background: giá trị; } Thuộc tính: Thuộc tính giá trị Mô tả background-size đơn vị (1 thành phần) Xác định chiều rộng theo đơn vị, […]
Định nghĩa và sử dụng
Thuộc tính background trong css3 dùng để định dạng các dạng background ngoài dạng đã được định nghĩa ở css2.
Cấu trúc
tag {
thuộc tính background: giá trị;
}
Thuộc tính:
| Thuộc tính | giá trị | Mô tả |
|---|---|---|
| background-size | đơn vị (1 thành phần) | Xác định chiều rộng theo đơn vị, chiều cao sẽ tự động chỉnh theo tỷ lệ. |
| đơn vị (2 thành phần) | Xác định chiều rộng và chiều cao cho vùng background theo đơn vị. | |
| % (1 thành phần) | Xác định chiều rộng theo % của nội dung bao ngoài, chiều cao sẽ tự động chỉnh theo tỷ lệ. | |
| % (2 thành phần) | Xác định chiều rộng và chiều cao cho vùng background theo % của nội dung bao ngoài. | |
| cover | Tự chia tỷ lệ tới kích thước lớn nhất của chiều rộng hoặc chiều cao để phù hợp với vùng nội dung.
|
|
| contain | Tự chia tỷ lệ tới kích thước nhỏ nhất của chiều rộng hoặc chiều cao để phù hợp với vùng nội dung.
|
Ví dụ
Html viết:
<html> <head></head> <body> <div>background-size background-size background-size background-size background-size.</div> </body> </html>
CSS viết:
div {
border: 10px dotted #cc0000;
padding: 20px;
width: 150px;
background-color: #ccc;
background-image: url("https://lth90.top/wp-content/uploads/2023/10/css3-02.jpg.webp");
background-repeat: no-repeat;
}
Hiển thị trình duyệt:
background-size background-size background-size background-size background-size.
CSS viết:
div {
background-color: #ccc;
background-image: url("https://lth90.top/wp-content/uploads/2023/10/css3-02.jpg.webp");
background-size: 100px 100px;
background-repeat: no-repeat;
border: 10px dotted #cc0000;
padding: 20px;
width: 150px;
}
Hiển thị trình duyệt:
background-size background-size background-size background-size background-size.
Trình duyệt hỗ trợ
Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ:
| Trình duyệt PC | Smartphone – Tablets | |
| background-size | Internet Explorer 9 | IOS 3.2 |
| Firefox 4 | Android 2.1 | |
| Opera 10.5 | Window Phone 7.5 | |
| Google Chrome 10 | ||
| Safari 5.1 |
