Đị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 (Xem thêm về background trong css2).
Cấu trúc:
tag {
thuộc tính background: giá trị;
}
Thuộc tính của background trong css3:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| background-clip | padding-box | background-clip: padding-box; | Xác định vùng background được cắt bớt, giới hạn lại theo vùng chứa padding (không bao gồm border). |
| border-box | background-clip: border-box; | Xác định vùng background được cắt bớt, giới hạn lại theo vùng chứa border. | |
| content-box | background-clip: content-box; | Xác định vùng background được cắt bớt, giới hạn lại theo vùng chứa nội dung. | |
| background-origin | padding-box | background-origin: padding-box; | Xác định giá trị tương đối của background giới hạn theo vùng chứa padding (không bao gồm border). |
| border-box | background-origin: border-box; | Xác định giá trị tương đối của background giới hạn theo vùng chứa border. | |
| content-box | background-origin: content-box; | Xác định giá trị tương đối của background giới hạn theo vùng chứa nội dung. | |
| background-size | đơn vị (1 thành phần) | background-size: 100px; | 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) | background-size: 100px 50px; | Xác định chiều rộng và chiều cao cho vùng background theo đơn vị. | |
| % (1 thành phần) | background-size: 50%; | 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) | background-size: 100% 50%; | 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 | background-size: 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 | background-size: 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-clip background-clip background-clip background-clip background-clip.</div>
</body>
</html>
CSS viết:
div {
background: #ccc;
border: 10px dotted #cc0000;
height: 150px;
padding: 20px;
width: 150px;
}
Hiển thị trình duyệt khi chưa sử dụng background-clip:
background-clip background-clip background-clip background-clip background-clip.
Thêm thuộc tính background-clip với giá trị padding-box vào CSS, ta có:
div {
background: #ccc;
background-clip: padding-box;
border: 10px dotted #cc0000;
height: 150px;
padding: 20px;
width: 150px;
}
Hiển thị trình duyệt khi sử dụng background-clip: padding-box:
background-clip background-clip background-clip background-clip background-clip.
Trình duyệt và hệ điều hành 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ợ cho thuộc tính background:
| Trình duyệt PC | Smartphone - Tablets | |||||||
 |
 |
 |
 |
 |
 |
 |
 |
|
| background-clip | 9 | 4 | 10.5 | 10 | 5.1 -webkit- |
3.2 | 2.1 | 7.5 |
| background-origin | 9 | 4 | 10.5 | 4 | 5.1 | 3.2 | 2.1 | 7.5 |
| background-size | 9 | 4 | 10.5 | 4 | 5.1 | 3.2 | 2.1 | 7.5 |