background-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die background-color
CSS-Eigenschaft legt die Hintergrundfarbe eines Elements fest.
Probieren Sie es aus
background-color: brown;
background-color: #74992e;
background-color: rgb(255 255 128);
background-color: rgb(255 255 128 / 0.5);
background-color: hsl(50 33% 25%);
background-color: hsl(50 33% 25% / 0.75);
<section id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#example-element {
min-width: 100%;
min-height: 100%;
padding: 10%;
}
Syntax
/* Keyword values */
background-color: red;
background-color: indigo;
/* Hexadecimal value */
background-color: #bbff00; /* Fully opaque */
background-color: #bf0; /* Fully opaque shorthand */
background-color: #11ffee00; /* Fully transparent */
background-color: #1fe0; /* Fully transparent shorthand */
background-color: #11ffeeff; /* Fully opaque */
background-color: #1fef; /* Fully opaque shorthand */
/* RGB value */
background-color: rgb(255 255 128); /* Fully opaque */
background-color: rgb(117 190 218 / 50%); /* 50% transparent */
/* HSL value */
background-color: hsl(50 33% 25%); /* Fully opaque */
background-color: hsl(50 33% 25% / 75%); /* 75% opaque, i.e. 25% transparent */
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: revert;
background-color: revert-layer;
background-color: unset;
Die Eigenschaft background-color
wird als einzelner <color>
-Wert angegeben.
Werte
<color>
-
Die einheitliche Farbe des Hintergrunds. Sie wird hinter jedem angegebenen
background-image
gerendert, obwohl die Farbe trotzdem durch jede Transparenz im Bild sichtbar bleibt.
Barrierefreiheit
Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Hintergrundfarbe und der darüber liegenden Textfarbe hoch genug ist, damit Menschen mit Sehschwächen den Inhalt der Seite lesen können.
Das Kontrastverhältnis wird durch Vergleich der Luminanz der Text- und Hintergrundfarben bestimmt. Um den aktuellen Web Content Accessibility Guidelines (WCAG) zu entsprechen, ist ein Verhältnis von 4,5:1 für Textinhalte und 3:1 für größeren Text wie Überschriften erforderlich. Großer Text wird als 18,66px und fett oder größer, oder 24px oder größer definiert.
Formelle Definition
Anfangswert | transparent |
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Nein |
Berechneter Wert | berechnete Farbe |
Animationstyp | Farbe |
Formelle Syntax
background-color =
<color>
Beispiele
Boxen einfärben
Dieses Beispiel zeigt die Anwendung von background-color
auf HTML-<div>
-Elemente unter Verwendung verschiedener CSS-<color>
-Werte.
HTML
<div class="example-one">Lorem ipsum dolor sit amet, consectetuer</div>
<div class="example-two">Lorem ipsum dolor sit amet, consectetuer</div>
<div class="example-three">Lorem ipsum dolor sit amet, consectetuer</div>
CSS
.example-one {
background-color: transparent;
}
.example-two {
background-color: rgb(153 102 153);
color: rgb(255 255 204);
}
.example-three {
background-color: #777799;
color: #ffffff;
}
Ergebnis
Tabellen einfärben
Dieses Beispiel zeigt die Verwendung von background-color
auf HTML-<table>
-Elementen, einschließlich <tr>
-Reihen und <td>
-Zellen.
HTML
<table>
<tr id="r1">
<td id="c11">11</td>
<td id="c12">12</td>
<td id="c13">13</td>
</tr>
<tr id="r2">
<td id="c21">21</td>
<td id="c22">22</td>
<td id="c23">23</td>
</tr>
<tr id="r3">
<td id="c31">31</td>
<td id="c32">32</td>
<td id="c33">33</td>
</tr>
</table>
CSS
table {
border-collapse: collapse;
border: solid black 1px;
width: 250px;
height: 150px;
}
td {
border: solid 1px black;
}
#r1 {
background-color: lightblue;
}
#c12 {
background-color: cyan;
}
#r2 {
background-color: grey;
}
#r3 {
background-color: olive;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # background-color |
Browser-Kompatibilität
Siehe auch
- Mehrere Hintergründe
- Der
<color>
-Datentyp - Andere farbbezogene Eigenschaften:
color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
, undcolumn-rule-color