Màu nền CSS (background-color): trang, phần tử, trong suốt

Cách đặt màu nền

background-color tô màu cho hộp của một phần tử, gồm cả padding và vùng nằm dưới đường viền. Thuộc tính này nhận mọi giá trị màu CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background color</title>
  <style>
    body { font-family: system-ui, sans-serif; background-color: #f3f4f6; }
    .card { background-color: #ffffff; padding: 16px; border-radius: 8px; margin-bottom: 12px; }
    .notice { background-color: #fef3c7; padding: 12px 16px; }
    mark { background-color: #bbf7d0; }
  </style>
</head>
<body>
  <div class="card">A white card on a light gray page.</div>
  <div class="notice">An amber notice.</div>
  <p>A <mark>highlighted phrase</mark> inside a sentence.</p>
  <p><span style="background-color: #2563eb; color: white; padding: 2px 6px;">inline style</span></p>
</body>
</html>

Màu trang được đặt trên body, tấm thẻ và thông báo trên các div của chúng, còn phần tô sáng trên một phần tử inline. Phần tử inline chỉ có nền phía sau chữ, theo từng dòng.

Màu nền của cả trang

Đặt background-color cho body. Nếu phần tử <html> không có nền riêng, trình duyệt vẽ nền của body lên toàn bộ cửa sổ, kể cả chỗ nội dung của body đã hết:

body {
  background-color: #111827;
  color: #f9fafb; /* change the text color too, for contrast */
}

Cách cũ trong HTML là <body bgcolor="black">. Thuộc tính bgcolor đã lỗi thời trên mọi phần tử, nên hãy dùng CSS. Trình duyệt vẫn hỗ trợ nó cho các trang cũ, vì vậy có vẻ như nó vẫn hoạt động.

Nền trong suốt

Mọi phần tử đều bắt đầu với background-color: transparent, nên bạn nhìn thấy phần tử cha phía sau. Để phủ một lớp màu lên hộp mà vẫn nhìn xuyên qua được, dùng màu có kênh alpha:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transparent background</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600; padding: 12px;
      background: repeating-linear-gradient(45deg, #bfdbfe 0 12px, #ffffff 12px 24px);
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .none { background-color: transparent; border: 2px dashed #111827; }
    .tint { background-color: rgb(245 158 11 / 50%); }
    .solid { background-color: rgb(245 158 11); }
  </style>
</head>
<body>
  <div class="box none">transparent (the default)</div>
  <div class="box tint" id="tint">rgb(245 158 11 / 50%)</div>
  <div class="box solid">rgb(245 158 11)</div>
</body>
</html>

opacity: 0.5 cũng để các sọc hiện qua, nhưng làm mờ luôn cả chữ. Muốn nền nhìn xuyên qua được mà chữ vẫn rõ, hãy dùng màu alpha. Trang màu sắc liệt kê mọi cách viết màu.

Màu được tô đến đâu

Theo mặc định, nền phủ đến mép ngoài của đường viền (nên nó hiện qua đường viền nét đứt hoặc bán trong suốt). background-clip thay đổi điều đó:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>background-clip</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box {
      display: inline-block; margin: 6px; padding: 16px;
      border: 8px dashed #111827;
      background-color: #f59e0b;
    }
    .padding { background-clip: padding-box; }
    .content { background-clip: content-box; }
  </style>
</head>
<body>
  <div class="box">border-box</div>
  <div class="box padding">padding-box</div>
  <div class="box content">content-box</div>
</body>
</html>

Ở hộp thứ nhất, màu hổ phách hiện giữa các nét đứt. Ở hộp thứ hai, màu dừng ở mép trong của đường viền, còn ở hộp thứ ba chỉ vùng nội dung được tô màu. Margin không bao giờ được tô: nó luôn trong suốt.

Bảng có hàng sọc

Tô nền cho các hàng xen kẽ giúp bảng rộng dễ dò hơn:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped rows</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 8px 12px; text-align: start; }
    thead { background-color: #1f2937; color: white; }
    tbody tr:nth-child(even) { background-color: #f3f4f6; }
    tbody tr:hover { background-color: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Name</th><th>Role</th></tr></thead>
    <tbody>
      <tr><td>Ada</td><td>Engineer</td></tr>
      <tr><td>Grace</td><td>Admiral</td></tr>
      <tr><td>Alan</td><td>Mathematician</td></tr>
      <tr><td>Katherine</td><td>Physicist</td></tr>
    </tbody>
  </table>
</body>
</html>

background-color và cách viết rút gọn background

background đặt mọi thuộc tính nền cùng lúc. Phần nào bạn bỏ trống sẽ quay về giá trị mặc định, và điều này hay làm người ta bất ngờ:

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background: #111827;          /* also resets background-image to none */
}

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background-color: #111827;    /* only the color; the gradient stays */
}

Dùng background-color khi bạn chỉ muốn đặt màu. Dùng background khi bạn đặt toàn bộ nền ở một chỗ, thường là màu kèm ảnh; xem background-image.

Trợ năng: luôn đi cùng màu chữ

Màu nền chỉ dễ đọc khi đặt cạnh màu chữ phù hợp. Mỗi khi đặt một màu, hãy kiểm tra màu còn lại: WCAG yêu cầu tỷ lệ tương phản tối thiểu 4,5:1 cho chữ nội dung. Nền tối cần đặt rõ màu chữ sáng, vì chữ vẫn giữ màu tối được kế thừa.

Lỗi thường gặp

• Dùng bgcolor. Thuộc tính này đã lỗi thời. Hãy dùng background-color.
• Dùng opacity để làm nền trong suốt. Nó làm mờ cả nội dung. Hãy dùng màu alpha.
• Viết background rút gọn sau background-image. Nó đặt lại ảnh nền. Hãy viết background-color.
• Mong margin hiện màu nền. Margin nằm ngoài vùng nền. Dùng padding nếu cần khoảng trống có màu.
• Nền tối với chữ mặc định. Hãy đặt thêm color sáng.