background
Try it
Die CSS Kurzformat-Eigenschaft background
setzt alle Hintergrundstileigenschaften auf einmal, wie Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode.
Eigenschaftsbestandteile
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
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");
Die Eigenschaft background
wird als eine oder mehrere Hintergrundebenen, durch Kommata getrennt, angegeben.
Die Syntax der einzelnen Schichten ist wie folgt:
- Jede Schicht kann null oder ein Vorkommen eines der folgenden Werte enthalten:
- Der Wert
<bg-size>
darf nur unmittelbar nach<position>
, getrennt durch das Zeichen '/', wie folgt eingefügt werden: "center/80%
". - Der Wert
<box>
kann Null, eins oder zwei Mal eingeschlossen werden. Wenn er einmal eingeschlossen wird, setzt er sowohlbackground-origin
als auchbackground-clip
. Bei zweimaligem Einschließen setzt das erste Vorkommenbackground-origin
und das zweite Vorkommenbackground-clip
. - Der Wert
<background-color>
darf nur in der zuletzt angegebenen Ebene enthalten sein.
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>
- Siehe
background-attachment
<box>
- Siehe
background-clip
andbackground-origin
<background-color>
- Siehe
background-color
<bg-image>
- See
background-image
<position>
- Siehe
background-position
<repeat-style>
- Siehe
background-repeat
<bg-size>
- Siehe
background-size
.
Bedenken zur Zugänglichkeit
Browser bieten keine speziellen Informationen über Hintergrundbilder zu unterstützenden Technologien. Dies ist vor allem für Bildschirmleseprogramme wichtig, da ein Bildschirmleseprogramm seine Anwesenheit nicht ankündigt und seinen Benutzern daher nichts vermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, diese im Dokument semantisch zu beschreiben.
Formale Definition
Initialwert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter (en-US) und ::first-line (en-US). |
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> ||
<box> ||
<box>
<final-bg-layer> =
<'background-color'> ||
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<box> ||
<box>
<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,∞]> (en-US) | 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
<image> =
<url> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<gradient> =
<linear-gradient()> |
<repeating-linear-gradient()> (en-US) |
<radial-gradient()> |
<repeating-radial-gradient()> (en-US)
<linear-gradient()> =
linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> =
radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<side-or-corner> =
[ left | right ] ||
[ top | bottom ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<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> ]
<linear-color-stop> =
<color> &&
<length-percentage>?
<linear-color-hint> =
<length-percentage>
<color> =
<absolute-color-base> |
currentcolor |
<system-color> |
<device-cmyk()>
<absolute-color-base> =
<hex-color> (en-US) |
<named-color> |
transparent |
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>
<device-cmyk()> =
device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )
<rgb()> =
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> =
hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> =
color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<cmyk-component> =
<number> |
<percentage>
<alpha-value> =
<number> |
<percentage>
<hue> =
<number> |
<angle> |
none
<colorspace-params> =
<predefined-rgb-params> |
<xyz-params>
<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> =
<xyz-space> [ <number> | none ]{3}
<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
<xyz-space> =
xyz |
xyz-d50 |
xyz-d65
Beispiele
Hintergründe mit farbigen Schlüsselwörtern und Bildern setzen
HTML
<p class="topbanner">
Starry sky<br/>
Twinkle twinkle<br/>
Starry sky
</p>
<p class="warning">Here is a paragraph<p>
CSS
.warning {
background: pink;
}
.topbanner {
background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
}
Ergebnis
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
CSS Backgrounds and Borders Module Level 3 Die Definition von 'background' in dieser Spezifikation. |
Anwärter Empfehlung | Die Kurzformat-Eigenschaft 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
BCD tables only load in the browser