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.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Prozentwertewie die jeweiligen Kurzschreibweisen:
  • background-position: bezieht sich auf die Größe des Hintergrundpositionsbereichs abzüglich der Größe des Hintergrundbilds; die Größe bezieht sich auf die vertikalen und horizontalen Verschiebungen
  • background-size: bezieht sich auf den jeweiligen Bereich
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
  • background-image: wie angegeben, aber URIs absolut gemacht
  • background-position: a list, each item consisting of two keywords representing the origin undtwo offsets from that origin, each given as an absolute length (if given a length), otherwise as a percentage
  • background-size: relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
  • background-repeat: eine Liste, wobei jedes Element aus zwei Schlüsselwörtern besteht, eins pro Dimension
  • background-origin: wie angegeben
  • background-clip: wie angegeben
  • background-attachment: wie angegeben
  • background-color: 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).
Animationstypwie die jeweiligen Kurzschreibweisen:
Kanonische ReihenfolgeReihenfolge 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");
Hinweis: Die 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> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

wobei
<bg-image> = none | <image>
<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-box

wobei
<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( <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
<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}

wobei
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<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

Merkmal Firefox (Gecko) Chrome Internet Explorer Opera Safari
Grundlegende Unterstützung 1.0 (1.7 oder früher) 1.0 4.0 3.5 1.0
Mehrere Hintergründe 3.6 (1.9.2) 1.0 9.0 10.5 1.3
SVG-Bild als Hintergrund 4.0 (2.0) 31.0 9.0 21.0 5.1
Unterstützung für background-size 18.0 (18.0) 21.0 9.0 21.0 5.1
Unterstützung für background-origin und background-clip 22.0 (22.0) 31.0 9.0 21.0 5.1
Merkmal Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung 1.0 (1.9.2) 2.1 10.0 5.0 3.2
Mehrere Hintergründe 1.0 (1.9.2) 2.1 10.0 5.0 3.2
SVG-Bild als Hintergrund 4.0 (2.0) 3.0 10.0 ? 4.2
Unterstützung für background-size 18.0 (18.0) 3.0 10.0 (Ja) 4.0
Unterstützung für background-origin und background-clip 22.0 (22.0) 3.0 10.0 Nicht unterstützt 4.0

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: SphinxKnight, Sebastianz, fscholz, Yuichiro, Jürgen Jeka, Michael2402
 Zuletzt aktualisiert von: SphinxKnight,