Thuộc tính background-color CSS

Định nghĩa và cách sử dụng

background-color Thuộc tính đặt màu nền cho yếu tố.

Phạm vi nền yếu tố

background-color Đặt một màu đơn色 cho yếu tố. Màu này sẽ lấp đầy nội dung, biên khoảng cách và khu vực viền của yếu tố, mở rộng đến ranh giới bên ngoài của viền yếu tố (nhưng không bao gồm biên mép). Nếu viền có phần trong suốt (như viền mờ), màu nền sẽ hiển thị qua các phần trong suốt này.

giá trị trong suốt

Mặc dù trong hầu hết các trường hợp, không cần thiết phải sử dụng transparent. Tuy nhiên, nếu bạn không muốn yếu tố nào đó có màu nền và cũng không muốn thiết kế của bạn bị ảnh hưởng bởi thiết lập màu của người dùng trình duyệt, thì hãy đặt transparent Giá trị là cần thiết.

Xin xem thêm:

Hướng dẫn CSS:BGCSS

Hướng dẫn tham khảo HTML DOM:Thuộc tính backgroundColor

Mô hình

Đặt màu nền cho các yếu tố khác nhau:

body
  {
  background-color:yellow;
  }
h1
  {
  background-color:#00ff00;
  }
p
  {
  background-color:rgb(255,0,255);
  }

Thử nghiệm trực tiếp

Ngữ pháp CSS

background-color: color|transparent|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
color_name Định nghĩa màu nền có giá trị là tên màu (ví dụ red).
hex_number Định nghĩa màu nền có giá trị là giá trị hex (ví dụ #ff0000).
rgb_number Định nghĩa màu nền có giá trị là mã rgb (ví dụ rgb(255,0,0)).
transparent Mặc định. Màu nền là trong suốt.
inherit Định nghĩa rằng thuộc tính background-color nên kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: transparent
Kế thừa: no
Phiên bản: CSS1
Ngữ pháp JavaScript: object.style.backgroundColor="#00FF00"

Hỗ trợ trình duyệt

Số liệu trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5