Dokumentacja CSS z przykładami: Kolor tła

Q: Jak zmienić kolor tła w HTML?

Użyj właściwości CSS background-color. Dla całej strony: body { background-color: #f3f4f6; }. Dla jednego elementu: .

Q: Czy bgcolor nadal działa w HTML?

Nie. Atrybut bgcolor na , i jest w HTML5 przestarzały. Przeglądarki wciąż go rysują na starych stronach, ale właściwy sposób to background-color w CSS.

Q: Jak zrobić przezroczysty kolor tła?

Użyj koloru z kanałem alfa, na przykład background-color: rgb(37 99 235 / 20%);. W przeciwieństwie do opacity tekst w środku pozostaje w pełni widoczny.

Q: Czym różni się background od background-color?

background-color ustawia tylko kolor. background to skrót dla wszystkich właściwości tła (koloru, obrazu, pozycji, rozmiaru, powtarzania, przewijania, origin i clip), więc background: red; resetuje też obraz tła do none.

Q: Dlaczego kolor tła body wypełnia całe okno?

Gdy element nie ma własnego tła, przeglądarka maluje tło body na całym obszarze okna, nawet poza pudełkiem body. Nadaj html tło, jeśli chcesz, żeby te dwa się różniły.

Jak ustawić kolor tła

background-color wypełnia kolorem pudełko elementu razem z jego paddingiem i obszarem pod obramowaniem. Przyjmuje dowolny kolor 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>

Kolor strony jest ustawiony na body, karta i komunikat na swoich elementach div, a podświetlenie na elemencie liniowym. Elementy liniowe dostają tło tylko za swoim tekstem, linijka po linijce.

Kolor tła całej strony

Ustaw background-color na body. Jeśli element <html> nie ma własnego tła, przeglądarka maluje tło body na całym oknie, nawet tam, gdzie kończy się treść body:

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

Dawniej w HTML pisało się <body bgcolor="black">. Atrybut bgcolor jest przestarzały na każdym elemencie, więc używaj CSS. Przeglądarki nadal go obsługują ze względu na stare strony, dlatego może się wydawać, że działa.

Przezroczyste tło

Każdy element zaczyna z background-color: transparent, więc widać przez niego rodzica. Żeby zabarwić pudełko i nadal widzieć, co jest pod nim, użyj koloru z kanałem alfa:

<!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 też pokazałoby paski pod spodem, ale przyciemniłoby również tekst. Dla prześwitującego tła z pełnym tekstem użyj koloru z alfą. Na stronie o kolorach znajdziesz wszystkie sposoby jego zapisu.

Gdzie maluje się kolor

Domyślnie tło sięga zewnętrznej krawędzi obramowania (więc prześwituje przez przerywane albo półprzezroczyste obramowanie). Zmienia to background-clip:

<!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>

W pierwszym pudełku bursztynowy kolor widać między kreskami. W drugim kończy się na wewnętrznej krawędzi obramowania, a w trzecim kolorowy jest tylko obszar treści. Margines nigdy nie jest malowany: zawsze jest przezroczysty.

Wiersze tabeli w paski

Tło na co drugim wierszu ułatwia przeglądanie szerokich tabel:

<!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 a skrót background

background ustawia wszystkie właściwości tła naraz. Każda część, którą pominiesz, wraca do wartości domyślnej, co często zaskakuje:

.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 */
}

Używaj background-color, gdy chodzi ci tylko o kolor. Używaj background, gdy ustawiasz całe tło w jednym miejscu, często kolor razem z obrazem; zobacz background-image.

Dostępność: dopasuj kolor tekstu

Kolor tła jest czytelny tylko w parze z kolorem tekstu. Gdy ustawiasz jeden, sprawdź drugi: WCAG wymaga dla zwykłego tekstu współczynnika kontrastu co najmniej 4.5:1. Ciemne tło wymaga jawnie ustawionego jasnego tekstu, bo tekst zachowuje odziedziczony ciemny kolor.

Częste błędy

Używanie bgcolor. Jest przestarzały. Użyj background-color.
Używanie opacity do prześwitującego tła. Przyciemnia też treść. Użyj koloru z alfą.
Skrót background po background-image. Resetuje obraz. Napisz zamiast tego background-color.
Oczekiwanie, że margines pokaże kolor. Margines leży poza tłem. Kolorową przestrzeń zrób paddingiem.
Ciemne tło z domyślnym tekstem. Ustaw też jasny color.

Najczęściej zadawane pytania

Jak zmienić kolor tła w HTML?

Użyj właściwości CSS background-color. Dla całej strony: body { background-color: #f3f4f6; }. Dla jednego elementu: <div style="background-color: #fef3c7;">.

Czy bgcolor nadal działa w HTML?

Nie. Atrybut bgcolor na <body>, <table> i <td> jest w HTML5 przestarzały. Przeglądarki wciąż go rysują na starych stronach, ale właściwy sposób to background-color w CSS.

Jak zrobić przezroczysty kolor tła?

Użyj koloru z kanałem alfa, na przykład background-color: rgb(37 99 235 / 20%);. W przeciwieństwie do opacity tekst w środku pozostaje w pełni widoczny.

Czym różni się background od background-color?

background-color ustawia tylko kolor. background to skrót dla wszystkich właściwości tła (koloru, obrazu, pozycji, rozmiaru, powtarzania, przewijania, origin i clip), więc background: red; resetuje też obraz tła do none.

Dlaczego kolor tła body wypełnia całe okno?

Gdy element <html> nie ma własnego tła, przeglądarka maluje tło body na całym obszarze okna, nawet poza pudełkiem body. Nadaj html tło, jeśli chcesz, żeby te dwa się różniły.

Powiązane zagadnienia