Thuộc tính nền phong cách
Thí dụ
Tạo kiểu cho nền của tài liệu:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc tính nền đặt hoặc trả về tối đa tám thuộc tính nền riêng biệt, ở dạng viết tắt.
Với thuộc tính này, bạn có thể đặt / trả lại một hoặc nhiều điều sau (theo bất kỳ thứ tự nào):
- màu nền
- hình nền
- Bối cảnh Lặp lại
- nền-tệp đính kèm
- nền-vị trí
- kích thước nền
- nền-nguồn gốc
- nền-clip
Các thuộc tính trên cũng có thể được đặt với các thuộc tính kiểu riêng biệt. Việc sử dụng các thuộc tính riêng biệt rất được khuyến khích đối với các tác giả không chuyên sâu để có khả năng kiểm soát tốt hơn.
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
Trả lại thuộc tính nền:
object.style.background
Đặt thuộc tính nền:
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
Giá trị tài sản
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Chi tiết kỹ thuật
| Giá trị mặc định: | trong suốt không lặp lại cuộn 0% 0% hộp viền hộp tự động đệm |
|---|---|
| Giá trị trả lại: | Một chuỗi, đại diện cho nền của một phần tử |
| Phiên bản CSS | CSS1 + thuộc tính mới trong CSS3 |
Các ví dụ khác
Thí dụ
Thay đổi nền của phần tử DIV:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
Thí dụ
Đặt màu nền cho tài liệu:
document.body.style.backgroundColor = "red";
Thí dụ
Đặt hình nền cho tài liệu:
document.body.style.backgroundImage = "url('img_tree.png')";
Thí dụ
Đặt hình nền thành không lặp lại:
document.body.style.backgroundRepeat = "repeat-y";
Thí dụ
Đặt hình nền cố định (sẽ không cuộn):
document.body.style.backgroundAttachment = "fixed";
Thí dụ
Thay đổi vị trí của hình nền:
document.body.style.backgroundPosition = "top right";
Thí dụ
Trả về các giá trị thuộc tính nền của tài liệu:
document.body.style.background;
Các trang liên quan
Hướng dẫn CSS: Nền CSS
Hướng dẫn CSS3: Hình nền CSS3
Tham chiếu CSS: thuộc tính nền