background
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die background
-Shorthand-CSS-Eigenschaft legt alle Hintergrundstileigenschaften gleichzeitig fest, wie beispielsweise Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode. Nicht in der Wertedeklaration der background
-Shorthand-Eigenschaft gesetzte Komponenten-Eigenschaften werden auf ihre Standardwerte gesetzt.
Probieren Sie es aus
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Shorthand-Eigenschaft für die folgenden CSS-Eigenschaften:
Syntax
/* Using a <background-color> */
background: green;
/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;
/* Using a <box> and <background-color> */
background: border-box red;
/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");
/* Global values */
background: inherit;
background: initial;
background: revert;
background: revert-layer;
background: unset;
Die background
-Eigenschaft wird als eine oder mehrere Hintergrundebenen angegeben, die durch Kommata getrennt sind.
Die Syntax jeder Ebene ist wie folgt:
-
Jede Ebene darf jeweils null oder einmal folgende Werte enthalten:
<attachment>
<bg-image>
<position>
<bg-size>
<repeat-style>
-
Der
<bg-size>
-Wert darf nur unmittelbar nach<position>
eingeschlossen werden, getrennt durch das '/'-Zeichen, wie folgt:center/80%
. -
Der
<box>
-Wert kann null-, einmal oder zweimal eingeschlossen werden. Wenn er einmal eingeschlossen wird, legt er sowohlbackground-origin
als auchbackground-clip
fest. Wenn er zweimal eingeschlossen wird, legt das erste Vorkommenbackground-origin
fest, und das zweite legtbackground-clip
fest. -
Der
<background-color>
-Wert darf nur in der letzten angegebenen Ebene enthalten sein.
Werte
<attachment>
-
Siehe
background-attachment
. Standard:scroll
. <box>
-
Siehe
background-clip
undbackground-origin
. Standard:border-box
undpadding-box
entsprechend. <background-color>
-
Siehe
background-color
. Standard:transparent
. <bg-image>
-
Siehe
background-image
. Standard:none
. <position>
-
Siehe
background-position
. Standard: 0% 0%. <repeat-style>
-
Siehe
background-repeat
. Standard:repeat
. <bg-size>
-
Siehe
background-size
. Standard:auto
.
Die folgenden drei CSS-Zeilen sind äquivalent:
background: none;
background: transparent;
background: repeat scroll 0% 0% / auto padding-box border-box none transparent;
Formale Definition
Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Nein |
Prozentwerte | wie die jeweiligen Kurzschreibweisen:
|
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
background =
<bg-layer>#? , <final-bg-layer>
<bg-layer> =
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<visual-box> ||
<visual-box>
<final-bg-layer> =
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<visual-box> ||
<visual-box> ||
<'background-color'>
<bg-image> =
<image> |
none
<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 [0,∞]> | auto ]{1,2} |
cover |
contain
<repeat-style> =
repeat-x |
repeat-y |
[ repeat | space | round | no-repeat ]{1,2}
<attachment> =
scroll |
fixed |
local
<visual-box> =
content-box |
padding-box |
border-box
<background-color> =
<color>
<image> =
<url> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Barrierefreiheit
Browser stellen keine speziellen Informationen zu Hintergrundbildern für unterstützende Technologie bereit. Dies betrifft vor allem Screenreader, da ein Screenreader das Vorhandensein nicht ankündigt und daher keine Information an seine Nutzer weitergibt. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtsinns der Seite entscheidend sind, sollte es besser semantisch im Dokument beschrieben werden.
Beispiele
Festlegen von Hintergründen mit Farb-Schlüsselwörtern und Bildern
HTML
<p class="top-banner">
Starry sky<br />
Twinkle twinkle<br />
Starry sky
</p>
<p class="warning">Here is a paragraph</p>
<p></p>
CSS
.warning {
background: pink;
}
.top-banner {
background: url("star-solid.gif") #99f repeat-y fixed;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-background |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background | ||||||||||||
SVG image as background | ||||||||||||
Values of background-clip longhand | ||||||||||||
Values of background-origin longhand | ||||||||||||
Values of background-size longhand | ||||||||||||
Multiple backgrounds |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support