Thuộc tính nền CSS
Ví 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;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính background là thuộc tính viết tắt của:
Sẽ không có vấn đề gì nếu thiếu một trong các giá trị trên, ví dụ: nền:#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: | vâng, xem các thuộc tính riêng lẻ . Đọc về hoạt hình Hãy thử nó |
| Phiên bản: | CSS1 + thuộc tính mới trong CSS3 |
| Cú pháp JavaScript: | object .style.background="url đỏ(smiley.gif) trên cùng bên trái không lặp lại" Hãy 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.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Lưu ý: Xem hỗ trợ trình duyệt riêng lẻ 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 một hình nền, được đặt cách 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ì tham số màu nền cần phải ở cuối danh sách.
Giá trị tài sản
| Value | Description | CSS | Demo |
|---|---|---|---|
| background-color | Specifies the background color to be used | 1 | Demo ❯ |
| background-image | Specifies ONE or MORE background images to be used | 1 | Demo ❯ |
| background-position | Specifies the position of the background images | 1 | Demo ❯ |
| background-size | Specifies the size of the background images | 3 | Demo ❯ |
| background-repeat | Specifies how to repeat the background images | 1 | Demo ❯ |
| background-origin | Specifies the positioning area of the background images | 3 | Demo ❯ |
| background-clip | Specifies the painting area of the background images | 3 | Demo ❯ |
| 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 |
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
