Thuộc tính nền phong cách
Ví 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";
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Sự miêu tả
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 tốc ký.
Với thuộc tính này, bạn có thể đặt/trả về một hoặc nhiều thứ sau (theo bất kỳ thứ tự nào):
Thuộc tính DOM | Thuộc tính CSS |
---|---|
nềnĐính kèm | đính kèm nền |
nềnClip | clip nền |
màu nền | màu nền |
hình nền | hình nền |
nềnNguồn gốc | nguồn gốc nền |
nềnVị trí | vị trí nền |
Bối cảnh Lặp lại | Bối cảnh Lặp lại |
nềnKích thước | kích thước nền |
Các thuộc tính trên cũng có thể được đặt bằng 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 có trình độ cao để có khả năng kiểm soát tốt hơn.
Xem thêm:
Kiểu HTML: Thuộc tính nền
Hướng dẫn CSS: Nền CSS
Hướng dẫn CSS3: Hình nền CSS3
Tham khảo CSS: Thuộc tính nền
Cú pháp
Trả về 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 |
---|---|
attachment | Sets if a background image is fixed or scrolls |
clip | Sets the painting area of a background image |
color | Sets the background color of an element |
image | Sets the background image for an element |
origin | Sets the background positioning area |
position | Sets the starting position of a background image |
repeat | Sets how a background image will be repeated |
size | Sets the size 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 đệm tự động hộp viền |
---|---|
Giá trị trả về: | Một chuỗi, đại diện cho nền của một phần tử |
Phiên bản CSS | CSS1 |
Hỗ trợ trình duyệt
background
là một tính năng CSS1 (1996).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | Yes |
Ghi chú
3 thuộc tính mới đã được thêm vào CSS3 (1999):
- clip nền
- nguồn gốc nền
- kích thước nền
Thêm ví dụ
Ví dụ
Thay đổi nền của phần tử DIV:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
Hãy tự mình thử »Ví dụ
Đặt hình nền cho tài liệu:
document.body.style.backgroundImage = "url('img_tree.png')";
Hãy tự mình thử »Ví dụ
Đặt hình nền thành không lặp lại:
document.body.style.backgroundRepeat = "repeat-y";
Hãy tự mình thử »Ví dụ
Đặt hình nền được cố định (sẽ không cuộn):
document.body.style.backgroundAttachment = "fixed";
Hãy tự mình thử »Ví dụ
Thay đổi vị trí của hình nền:
document.body.style.backgroundPosition = "top right";
Hãy tự mình thử »Ví dụ
Trả về các giá trị thuộc tính nền của tài liệu:
document.body.style.background;
Hãy tự mình thử »