Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.
Übersicht
Die background CSS Eigenschaft ist eine Kurzschreibweise, um die verschiedenen Hintergrundwerte an einer einzigen Stelle im Stylesheet zu setzen. background kann dazu verwendet werden, einen oder mehrere der folgenden Werte zu setzen: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size und background-attachment.
Die background CSS Kurzschreibweiseeigenschaft weist explizit angegebene Werte zu und setzt die fehlenden Eigenschaften auf deren Initialwerte zurück.
| Initialwert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line. |
| Vererbt | Nein |
| Prozentwerte | wie die jeweiligen Kurzschreibweisen:
|
| Medien | visuell |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
| Kanonische Reihenfolge | Reihenfolge des Auftretens in der formalen Grammatik der Werte |
Syntax
/* Verwendung von <background-color> */
background: green;
/* Verwendung von <bg-image> und <repeat-style> */
background: url("test.jpg") repeat-y;
/* Verwendung von <box> und <background-color> */
background: border-box red;
/* Ein einzelnes Bild, zentriert und skaliert */
background: no-repeat center/80% url("../img/image.png");
background-color kann nur für den letzten Hintergrund definiert werden, da es nur eine Hintergrundfarbe für das gesamte Element gibt.Werte
Einer oder mehrere der folgenden Werte, in beliebiger Reihenfolge:
<attachment>- See
background-attachment <box>- See
background-clip <background-color>- See
background-color <bg-image>- See
background-image <position>- See
background-position <repeat-style>- See
background-repeat <bg-size>- See
background-size. Diese Eigenschaft muss nach <position> angegeben werden, getrennt durch das '/'-Zeichen.
Formale Syntax
[ <bg-layer> , ]* <final-bg-layer>wobei
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>wobei
<bg-image> = none | <image>
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
<attachment> = scroll | fixed | local
<box> = border-box | padding-box | content-boxwobei
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>wobei
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )wobei
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?
Beispiele
HTML
<p class="topbanner"> Starry sky<br/> Twinkle twinkle<br/> Starry sky </p> <p class="warning">Here is a paragraph<p>
CSS
.warning {
background: red;
}
.topbanner {
background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
}
Result
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 Die Definition von 'background' in dieser Spezifikation. |
Anwärter Empfehlung | Die Kurzschreibweiseeigenschaft wurde erweitert, sodass sie mehrere Hintergründe und die neuen Eigenschaften background-size, background-origin und background-clip unterstützt. |
| CSS Level 2 (Revision 1) Die Definition von 'background' in dieser Spezifikation. |
Empfehlung | Keine wesentlichen Änderungen |
| CSS Level 1 Die Definition von 'background' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Grundlegende Unterstützung | 1 | 12 | 1 | 4 | 3.5 | 1 |
| Multiple backgrounds | 1 | 12 | 3.6 | 9 | 10.5 | 1.3 |
| SVG image as background | 31 | 12 | 9 | 9 | 21 | 5.1 |
Values of background-size longhand | 21 | 12 | 9 | 9 | 21 | 5.1 |
Values of background-origin longhand | 21 | 12 | 22 | 9 | 21 | 5.1 |
Values of background-clip longhand | 21 | 12 | 22 | 9 | 21 | 5.1 |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Grundlegende Unterstützung | 2.1 | ? | Ja | 4 | 5 | 3.2 | ? |
| Multiple backgrounds | 2.1 | ? | Ja | 4 | ? | 3.2 | ? |
| SVG image as background | 3 | ? | Ja | 4 | Ja | 4.2 | ? |
Values of background-size longhand | 3 | ? | Ja | 18 | Ja | 4 | ? |
Values of background-origin longhand | 3 | ? | Ja | 22 | Nein | 4 | ? |
Values of background-clip longhand | 3 | ? | Ja | 22 | Nein | 4 | ? |