Thuộc tính màu nền CSS
Thêm 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 background-color
đặt màu nền cho phần tử.
Nền của một phần tử là tổng kích thước của phần tử đó, bao gồm cả phần đệm và đường viền (không tính lề).
Mẹo: Sử dụng màu nền và màu văn bản giúp văn bản dễ đọc.
Giá trị mặc định: | trong suốt |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS1 |
Cú pháp JavaScript: | object .style.backgroundColor="#00FF00" Hãy dùng 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-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Cú pháp CSS
background-color: color |transparent|initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
color | Specifies the background color. Look at CSS Color Values for a complete list of possible color values. | Demo ❯ |
transparent | Specifies that the background color should be transparent. This is default | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Chỉ định màu nền bằng giá trị RGB:
body {background-color: rgb(201, 76, 76);}
Hãy tự mình thử »Ví dụ
Chỉ định màu nền bằng giá trị RGBA:
body {background-color: rgba(201, 76, 76, 0.3);}
Hãy tự mình thử »Ví dụ
Chỉ định màu nền bằng giá trị HSL:
body {background-color: hsl(89, 43%, 51%);}
Hãy tự mình thử »Ví dụ
Chỉ định màu nền bằng giá trị HSLA:
body {background-color: hsla(89, 43%, 51%, 0.3);}
Hãy tự mình thử »Ví dụ
Đặt màu nền cho các phần tử khác nhau:
body {
background-color: #fefbd8;
}
h1 {
background-color: #80ced6;
}
div {
background-color: #d5f4e6;
}
span {
background-color: #f18973;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Nền CSS
Tham chiếu DOM HTML: thuộc tính nềnColor