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.
| Initialwert | transparent |
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line. |
| Vererbt | Nein |
| Medien | visuell |
| Berechneter Wert | Falls 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). |
| Animierbar | ja, als Farbe |
| Kanonische Reihenfolge | die 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 mehrerebackground-imagedefiniert sind, kann diese Farbe die Darstellung durch Transparenzen in den Bildern beeinflussen. In CSS isttransparenteine 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 | WindowTextwobei
<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.