Thuộc tính CSSbackground-colorđặt màu nền cho một phần tử, tạo nền màu đồng nhất. Bạn có thể xác định màu bằng tên màu, giá trị thập lục phân,RGB, RGBA, HSL hoặc HSLA.Thuộc tính này áp dụng cho cả nội dung và vùng đệm của phần tử.
Bằng cách sử dụng thuộc tínhbackground-color, bạn có thể dễ dàng cải thiện giao diện trang web của mình. Nó mang lại sự linh hoạt trong cách bạn tạo kiểu cho nền, cho một phần tử cụ thể hay toàn trang.
Cú pháp
element {
background-color : color | transparent| initial | inherit;
}
Giá trị mặc định:Nó có một giá trị mặc định, tức là transparent.
Giá trị thuộc tính
Giá trị |
Mô tả |
|---|---|
color |
Xác định màu của văn bản, đường viền, nền và các thành phần khác. |
transparent |
Đặt màu hoàn toàn trong suốt, cho phép nội dung bên dưới hiển thị xuyên qua. |
initial |
Đặt lại thuộc tính về giá trị mặc định, tùy thuộc vào từng phần tử. |
inherit |
Kế thừa giá trị của thuộc tính từ phần tử cha. |
Dưới đây là giải thích chi tiết về từng giá trị thuộc tính.
Giá trị thuộc tính CSS background-color
. color Value:
Nó xác định giá trị màu nền hoặc mã màu. Ví dụ: Tên màu có thể được đặt là: “green” hoặc giá trị HEX là “#5570f0” hoặc giá trị RGB là “rgb(25, 255, 2)”.
Cú pháp:
element {
background-color: color_name;
}
Ví dụ:Trong ví dụ này, thuộc tính CSS background-color được sử dụng để đặt màu nền của các phần tử. Ở đây, nó tạo kiểu cho body màu xanh lá cây, <h1> màu xanh lam và <h2> màu đen với màu văn bản tương phản.
html<!DOCTYPE html>
<html>
<head>
<title>background-color property</title>
<style>
body {
text-align: center;
background-color: green;
}
h1 {
color: white;
background-color: blue;
}
h2 {
color: white;
background-color: black;
}
</style>
</head>
<body>
<h1>Geeksforgeeks </h1>
<h2>background-color: color_name;</h2>
</body>
</html>
Đầu ra:
. transparent Value:
Đây là giá trị mặc định. Nó chỉ định màu nền trong suốt.
Cú pháp
element {
background-color : transparent;
}
Ví dụ:Trong ví dụ này, body và các tiêu đề (<h1> và <h2>) có nền trong suốt. Điều này cho phép màu nền của trang (nếu có) hiển thị xuyên qua.
html<!DOCTYPE html>
<html>
<head>
<title>background-color property</title>
<style>
body {
background-color: transparent;
text-align: center;
}
h1 {
background-color: transparent;
}
h2 {
background-color: transparent;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>background-color: transparent;</h2>
</body>
</html>
Đầu ra:
. initial Value:
Nó được sử dụng để đặt giá trị mặc định. Nó không đặt màu nền.
Cú pháp:
element {
background-color: initial;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-color initial property</title>
<style>
body {
text-align: center;
background-color: green;
}
h1 {
color: white;
background-color: initial; /* Setting background-color to its initial value */
}
h2 {
color: white;
background-color: initial; /* Setting background-color to its initial value */
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
<h2>background-color: initial;</h2>
</body>
</html>
Đầu ra:
. Inherit:
Từ khóainheritcho thuộc tínhcolorkhiến một phần tử lấy giá trị màu từ phần tử cha của nó. Điều này có nghĩa là văn bản, đường viền, nền hoặc các thành phần khác trong phần tử sẽ tự động kế thừa màu của phần tử cha.
Cú pháp:
element {
background-color: Inherit;
}
Ví dụ:Trong ví dụ này, thẻ#parentdiv có thuộc tínhcolor: blue;. Thẻ#childdiv kế thừa màu này, vì vậy văn bản của nó cũng sẽ có màu xanh lam.
<!DOCTYPE html>
<html>
<head>
<title>Inherit Example</title>
<style>
body {
text-align: center;
background-color: green; /* Setting background color for body */
}
h1 {
background-color: inherit; /* Inheriting background color from body */
}
h2 {
background-color: inherit; /* Inheriting background color from body */
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
<h2>background-color: inherit;</h2>
</body>
</html>
Đầu ra:
Các trình duyệt được hỗ trợ
Các trình duyệt được hỗ trợ bởi thuộc tính css background-color được liệt kê dưới đây:
Lưu ý: Các trình duyệt lớn này hỗ trợ đầy đủ thuộc tính
background-colortrên nhiều phiên bản. Đảm bảo hiển thị nhất quán màu nền trên các trang web.