Übersicht
Die background-color
CSS Eigenschaft setzt die Hintergrundfarbe eines Elements, entweder durch einen Farbwert oder das Schlüsselwort transparent
.
Initialwert | transparent |
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Nein |
Berechneter Wert | berechnete Farbe |
Animationstyp | Farbe |
Syntax
/* Schlüsselwortwerte */
background-color: red;
/* Hexadezimalwert */
background-color: #bbff00;
/* RGB-Wert */
background-color: rgb(255, 255, 128);
/* HSLA-Wert */
background-color: hsla(50, 33%, 25%, 0.75);
/* Spezielle Schlüsselwortwerte */
background-color: currentColor;
background-color: transparent;
/* Globale Werte */
background-color: inherit;
background-color: initial;
background-color: unset;
Werte
<color>
- Ist ein CSS
<color>
Wert, der die einheitliche Farbe des Hintergrunds beschreibt. Sogar wenn ein oder mehrerebackground-image
definiert sind, kann diese Farbe die Darstellung durch Transparenzen in den Bildern beeinflussen. In CSS isttransparent
eine Farbe.
Formale Syntax
<color>wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Beispiele
HTML
<div class="exampleone">
Lorem ipsum dolor sit amet, consectetuer
</div>
<div class="exampletwo">
Lorem ipsum dolor sit amet, consectetuer
</div>
<div class="examplethree">
Lorem ipsum dolor sit amet, consectetuer
</div>
CSS
.exampleone {
background-color: teal;
color: white;
}
.exampletwo {
background-color: rgb(153,102,153);
color: rgb(255,255,204);
}
.examplethree {
background-color: #777799;
color: #FFFFFF;
}
Ergebnis
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
CSS Backgrounds and Borders Module Level 3 Die Definition von 'background-color' in dieser Spezifikation. |
Anwärter Empfehlung | Obwohl das Schlüsselwort transparent technisch entfernt wurde, ändert dies nichts, da es als echter <color> integriert wurde. |
CSS Level 2 (Revision 1) Die Definition von 'background-color' in dieser Spezifikation. |
Empfehlung | Keine Änderung |
CSS Level 1 Die Definition von 'background-color' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
BCD tables only load in the browser