Thuộc tính nền CSS
Thí dụ
Đặt các thuộc tính nền khác nhau trong một khai báo:
body
{
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
Định nghĩa và Cách sử dụng
Thuộc backgroundtính này là một thuộc tính viết tắt cho:
Sẽ không thành vấn đề nếu một trong các giá trị trên bị thiếu, ví dụ: background: # ff0000 url (smiley.gif); được cho phép.
| Giá trị mặc định: | xem các thuộc tính riêng lẻ |
|---|---|
| Thừa hưởng: | không |
| Hoạt hình: | có, hãy xem các thuộc tính riêng lẻ . Đọc về hoạt hình |
| Phiên bản: | CSS1 + thuộc tính mới trong CSS3 |
| Cú pháp JavaScript: | object .style.background = "red url (smiley.gif) trên cùng bên trái không lặp lại" |
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.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Lưu ý: Xem hỗ trợ từng trình duyệt cho từng giá trị bên dưới.
Cú pháp CSS
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Lưu ý: Nếu một trong các thuộc tính trong khai báo tốc ký là thuộc tính bg-size, bạn phải sử dụng dấu / (gạch chéo) để tách nó khỏi thuộc tính bg-position, ví dụ: background: url (smiley.gif) 10px 20px / 50px 50px ; sẽ tạo ra hình nền, được đặt 10 pixel từ bên trái, 20 pixel từ trên cùng và kích thước của hình ảnh sẽ rộng 50 pixel và cao 50 pixel.
Lưu ý: Nếu sử dụng nhiều nguồn hình nền nhưng cũng muốn có màu nền, thì thông số màu nền cần phải đứng cuối cùng trong danh sách.
Giá trị tài sản
| Value | Description | CSS |
|---|---|---|
| background-color | Specifies the background color to be used | 1 |
| background-image | Specifies ONE or MORE background images to be used | 1 |
| background-position | Specifies the position of the background images | 1 |
| background-size | Specifies the size of the background images | 3 |
| background-repeat | Specifies how to repeat the background images | 1 |
| background-origin | Specifies the positioning area of the background images | 3 |
| background-clip | Specifies the painting area of the background images | 3 |
| background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page | 1 |
| initial | Sets this property to its default value. Read about initial | 3 |
| inherit | Inherits this property from its parent element. Read about inherit | 2 |
Các trang liên quan
Hướng dẫn CSS: Nền CSS , Nền CSS (nâng cao)
Tham chiếu DOM HTML: thuộc tính nền