Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Übersicht

Die background-color CSS Eigenschaft setzt die Hintergrundfarbe eines Elements, entweder durch einen Farbwert oder das Schlüsselwort transparent.

Initialwerttransparent
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Medienvisuell
Berechneter WertFalls der Wert durchscheinend ist, ist der berechnete Wert der entsprechende rgba() Wert. Falls nicht, ist er der entsprechende rgb() Wert. Das transparent Schlüsselwort wird zu rgb(0,0,0).
Animierbarja, als Farbe
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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 mehrere background-image definiert sind, kann diese Farbe die Darstellung durch Transparenzen in den Bildern beeinflussen. In CSS ist transparent eine Farbe.

Formale Syntax

<color>
wobei 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
wobei 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
wobei 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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;
}

Result

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

Merkmal Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung 1.0 (1.7 oder früher) 1.0 4.0 [1] 3.5 1.0 (85)
Merkmal Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung 1.0 (1.9.2) (Ja) (Ja) (Ja) (Ja)

[1]: In Internet Explorer 8-9 gibt es einen Bug, durch den ein berechneter background-color Wert von transparent keine click Ereignisse bei überlagerten Elementen auslöst. Siehe die Dokumentation zum click Ereignis für Details.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: Sebastianz, SphinxKnight, fscholz, SJW, ethertank, Yuichiro, Michael2402
 Zuletzt aktualisiert von: Sebastianz,