HTML/CSS | Background-color

Học HTML, CSS từ Zero Tới Hero

• Cách sử dụng
• Cú pháp và giá trị màu
• Cách đặt màu nền cho phần tử
• Một số lưu ý
• Thành phần nào trong Box model đặt được màu nền?
• Phần tử cần có kích thước để nhìn được màu nền
• Màu nền mặc định là trong suốt

Cách sử dụng

Cú pháp và giá trị màu

selector {
  background-color: color;
}

Các giá trị màu sắc thường sử dụng:

• Tên màu: red, blue, v.v
• Mã HEX: #fff, #000, v.v.
• RGB: rgb(255, 0, 0), v.v.
• RGBA: rgba(255, 0, 0, 0.3), v.v.
• v.v

Cách đặt màu nền cho phần tử

Đặt cho class .box có màu nền là green:

<style>
  .box {
    width: 200px;
    height: 200px;
    margin: 20px;
    
    background-color: green;
  }
</style>

<div class="box"></div>

Một số lưu ý

Thành phần nào trong Box model đặt được màu nền?

Phần nền (bao gồm cả ảnh và màu nền) sẽ được đổ từ border tới content, margin không đặt được nền.

Phần tử cần có kích thước để nhìn được màu nền

Nếu phần tử không có kích thước (width hoặc height bằng 0), đồng thời cũng không có border, padding thì sẽ không thể nhìn thấy màu nền.

Hãy bỏ comment ở đoạn code bên dưới để thấy sự thay đổi:

Màu nền mặc định là trong suốt

Giá trị mặc định của background-color là transparent (trong suốt). Bạn sẽ nhìn xuyên qua và thấy màu nền của body qua ví dụ dưới đây.

Hãy quan sát, sau đó bỏ comment tại dòng 12 để thấy sự thay đổi:

<style>
  body {
    background-color: orange;
  }
  
  .box {
    width: 200px;
    height: 200px;
    margin: 20px;
    border: 5px dashed #666;
    
    /* background-color: green; */
  }
</style>

<div class="box"></div>

Tóm tắt

• Trong CSS, thuộc tính background-color dùng để thay đổi màu nền của một phần tử, giá trị mặc định là transparent - trong suốt.
• Có thể sử dụng mọi giá trị màu như: tên màu, mã HEX, màu RGB, v.v.
• Màu nền được đổ từ border vào padding và cả content. Để nhìn thấy màu nền, phần tử cần có kích thước.