background

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die background Kurznotierung CSS Eigenschaft legt alle Hintergrundstileigenschaften auf einmal fest, wie Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode. Komponenten-Eigenschaften, die nicht in der background-Kurznotierung Wertedeklaration festgelegt sind, werden auf ihre Standardwerte gesetzt.

Probieren Sie es aus

background: green;

background: content-box radial-gradient(crimson, skyblue);

background: no-repeat url("/shared-assets/images/examples/lizard.png");

background: left 5% / 15% 60% repeat-x url("/shared-assets/images/examples/star.png");

background: center / contain no-repeat url("/shared-assets/images/examples/firefox-logo.svg"), #eeeeee 35% url("/shared-assets/images/examples/lizard.png");

<section id="default-example"> <div id="example-element"></div> </section>

#example-element { min-width: 100%; min-height: 100%; padding: 10%; }

Bestandteileigenschaften

Diese Eigenschaft ist eine Kurznotierung für die folgenden CSS-Eigenschaften:

Syntax

css

/* Using a <background-color> */ background: green; /* Using a <bg-image> and <repeat-style> */ background: url("test.jpg") repeat-y; /* Using a <visual-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 ein oder mehrere Hintergrundschichten, getrennt durch Kommas, angegeben.

Die Syntax jeder Schicht ist wie folgt:

Jede Schicht darf null oder eine Vorkommen von einem der folgenden Werte enthalten:
- <attachment>
- <bg-image>
- <bg-position>
- <bg-size>
- <repeat-style>
Der <bg-size>-Wert darf nur unmittelbar nach <bg-position>, getrennt durch das '/'-Zeichen, enthalten sein, wie folgt: center/80%.
Der <visual-box>-Wert kann null, einmal oder zweimal enthalten sein. Wenn er einmal enthalten ist, setzt er sowohl background-origin als auch background-clip. Wenn er zweimal enthalten ist, setzt das erste Vorkommen background-origin, und das zweite setzt background-clip.
Der <'background-color'>-Wert darf nur in der zuletzt angegebenen Schicht enthalten sein.

Werte

<attachment>: Siehe background-attachment. Standard: scroll.
<visual-box>: Siehe background-clip und background-origin. Standard: border-box und padding-box jeweils.
<'background-color'>: Siehe background-color. Standard: transparent.
<bg-image>: Siehe background-image. Standard: none.
<bg-position>: Siehe background-position. Standard: 0% 0%.
<repeat-style>: Siehe background-repeat. Standard: repeat.
<bg-size>: Siehe background-size. Standard: auto.

Die folgenden drei Zeilen CSS sind gleichwertig:

css

background: none; background: transparent; background: repeat scroll 0% 0% / auto padding-box border-box none transparent;

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `background-image`: `none` `background-position`: `0% 0%` `background-size`: `auto auto` `background-repeat`: `repeat` `background-origin`: `padding-box` `background-clip`: `border-box` `background-attachment`: `scroll` `background-color`: `transparent`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Prozentwerte	wie 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
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `background-image`: wie angegeben, aber mit absoluten `<url>` Werten `background-position`: wie die jeweiligen Kurzschreibweisen: `background-position-x`: Eine Liste, bei der jeder Eintrag aus einem Versatz besteht, der durch eine Kombination aus absoluter Länge und einem Prozentsatz plus einem Ursprungsschlüsselwort definiert wird `background-position-y`: Eine Liste, bei der jeder Eintrag aus einem Versatz besteht, der durch eine Kombination aus absoluter Länge und einem Prozentsatz plus einem Ursprungsschlüsselwort definiert wird `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`: berechnete Farbe
Animationstyp	wie die jeweiligen Kurzschreibweisen: `background-color`: Farbe `background-image`: diskret `background-clip`: a repeatable list `background-position`: a repeatable list `background-size`: a repeatable list `background-repeat`: diskret `background-attachment`: diskret

Formale Syntax

background = 
 <bg-layer>#? , <final-bg-layer> 

<bg-layer> = 
 <bg-image> ||
 <bg-position> [ / <bg-size> ]? ||
 <repeat-style> ||
 <attachment> ||
 <bg-clip> ||
 <visual-box> 

<final-bg-layer> = 
 <bg-image> ||
 <bg-position> [ / <bg-size> ]? ||
 <repeat-style> ||
 <attachment> ||
 <bg-clip> ||
 <visual-box> ||
 <'background-color'> 

<bg-image> = 
 <image> |
 none 

<bg-position> = 
 <position> |
 <position-three> 

<bg-size> = 
 [ <length-percentage [0,∞]> | auto ]{1,2} |
 cover |
 contain 

<repeat-style> = 
 repeat-x |
 repeat-y |
 <repetition>{1,2} 

<attachment> = 
 scroll |
 fixed |
 local 

<bg-clip> = 
 <visual-box> |
 [ border-area || text ] 

<visual-box> = 
 content-box |
 padding-box |
 border-box 

<background-color> = 
 <color> 

<image> = 
 <url> |
 <image()> |
 <image-set()> |
 <cross-fade()> |
 <element()> |
 <gradient> 

<position> = 
 <position-one> |
 <position-two> |
 <position-four> 

<position-three> = 
 [ left | center | right ] && [ [ top | bottom ] <length-percentage> ] |
 [ [ left | right ] <length-percentage> ] && [ top | center | bottom ] 

<length-percentage> = 
 <length> |
 <percentage> 

<repetition> = 
 repeat |
 space |
 round |
 no-repeat 

<image()> = 
 image( <image-tags>? [ <image-src>? , <color>? ]! ) 

<image-set()> = 
 image-set( <image-set-option># ) 

<cross-fade()> = 
 cross-fade( <cf-image># ) 

<element()> = 
 element( <id-selector> ) 

<position-one> = 
 left |
 center |
 right |
 top |
 bottom |
 x-start |
 x-end |
 y-start |
 y-end |
 block-start |
 block-end |
 inline-start |
 inline-end |
 <length-percentage> 

<position-two> = 
 [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
 [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
 [ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
 [ start | center | end ]{2} 

<position-four> = 
 [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
 [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
 [ [ start | end ] <length-percentage> ]{2} 

<image-tags> = 
 ltr |
 rtl 

<image-src> = 
 <url> |
 <string> 

<image-set-option> = 
 [ <image> | <string> ] [ <resolution> || type( <string> ) ]? 

<cf-image> = 
 [ <image> | <color> ] &&
 <percentage [0,100]>? 

<id-selector> = 
 <hash-token>

Zugänglichkeit

Browser bieten keine speziellen Informationen über Hintergrundbilder für unterstützende Technologie. Dies ist vor allem für Bildschirmleseprogramme wichtig, da ein Bildschirmleseprogramm seine Anwesenheit nicht ankündigt und daher seinen Nutzern nichts vermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des allgemeinen Zwecks der Seite entscheidend sind, ist es besser, es semantisch im Dokument zu beschreiben.

Beispiele

Hintergründe mit Farbkeywords und Bildern festlegen

HTML

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

css

.warning { background: pink; } .top-banner { background: url("star-solid.gif") #9999ff repeat-y fixed; }

Ergebnis

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3 # background

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden