background-image
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.
* Some parts of this feature may have varying levels of support.
Die background-image
-Eigenschaft CSS legt ein oder mehrere Hintergrundbilder für ein Element fest.
Probieren Sie es aus
Die Hintergrundbilder werden auf Stapelebenen übereinander gezeichnet. Die erste angegebene Ebene wird so gezeichnet, als ob sie der Benutzerin oder dem Benutzer am nächsten wäre.
Die Ränder des Elements werden dann darauf gezeichnet, und die background-color
wird darunter gezeichnet. Wie die Bilder relativ zur Box und zu deren Rändern gezeichnet werden, wird durch die CSS-Eigenschaften background-clip
und background-origin
definiert.
Wenn ein angegebenes Bild nicht gezeichnet werden kann (zum Beispiel, wenn die Datei, auf die durch die festgelegte URI verwiesen wird, nicht geladen werden kann), behandeln die Browser dies so, als wäre der Wert none
angegeben.
Hinweis:
Auch wenn die Bilder opak sind und die Farbe unter normalen Umständen nicht angezeigt wird, sollten Webentwicklerinnen und Webentwickler immer eine background-color
festlegen. Wenn die Bilder nicht geladen werden können – beispielsweise, wenn das Netzwerk nicht verfügbar ist –, wird die Hintergrundfarbe als Fallback verwendet.
Syntax
/* single image */
background-image: linear-gradient(black, white);
background-image: url("cat-front.png");
/* multiple images */
background-image:
radial-gradient(circle, #0000 45%, #000f 48%),
radial-gradient(ellipse farthest-corner, #fc1c14 20%, #cf15cf 80%);
/* Global values */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;
Jedes Hintergrundbild wird entweder als das Schlüsselwort none
oder als ein <image>
-Wert angegeben.
Um mehrere Hintergrundbilder anzugeben, geben Sie mehrere Werte durch ein Komma getrennt an.
Werte
none
-
Ist ein Schlüsselwort, das das Fehlen von Bildern bezeichnet.
<image>
-
Ist ein
<image>
, das das anzuzeigende Bild angibt. Es können mehrere davon durch Kommata getrennt angegeben werden, da mehrere Hintergründe unterstützt werden.
Barrierefreiheit
Browser stellen unterstützenden Technologien keine speziellen Informationen zu Hintergrundbildern bereit. Dies ist vor allem für Screenreader wichtig, da diese die Anwesenheit eines Bildes nicht verkünden und daher nichts an die Benutzerinnen und Benutzer weitergeben. Falls das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite wichtig sind, ist es besser, diese semantisch im Dokument zu beschreiben.
- MDN Erklärung zur WCAG-Richtlinie 1.1
- Erklärung zu Erfolgskriterium 1.1.1 | W3C Understanding WCAG 2.0
Zudem ist es wichtig sicherzustellen, dass der Kontrast zwischen dem Hintergrundbild und dem Vordergrundtext hoch genug ist, damit Personen mit eingeschränktem Sehvermögen den Seiteninhalt lesen können.
Das Kontrastverhältnis wird bestimmt, indem die Helligkeitswerte von Text und Hintergrundfarbe verglichen werden. Um die Web Content Accessibility Guidelines (WCAG) zu erfüllen, ist ein Verhältnis von 4,5:1 für Fließtext und 3:1 für größere Schriftarten wie Überschriften erforderlich. Große Schriftarten sind definiert als 24px oder größer oder fett mit mindestens 18,66px.
Formale Definition
Anfangswert | none |
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Nein |
Berechneter Wert | wie angegeben, aber mit absoluten <url> Werten |
Animationstyp | diskret |
Formale Syntax
background-image =
<bg-image>#
<bg-image> =
<image> |
none
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Beispiele
Überlagerung von Hintergrundbildern
Beachten Sie, dass das Stern-Bild teilweise transparent ist und über das Katzen-Bild geschichtet wird.
HTML
<div>
<p class="cats-and-stars">This paragraph is full of cats<br />and stars.</p>
<p>This paragraph is not.</p>
<p class="cats-and-stars">Here are more cats for you.<br />Look at them!</p>
<p>And no more.</p>
</div>
CSS
p {
font-weight: bold;
font-size: 1.5em;
color: white;
text-shadow: 0.07em 0.07em 0.05em black;
background-image: none;
background-color: transparent;
}
div {
background-image: url("mdn_logo_only_color.png");
}
.cats-and-stars {
background-image: url("star-transparent.gif"), url("cat-front.png");
background-color: transparent;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # background-image |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
<img>
-
Bildbezogene Funktionen:
-
CSS-Bilder-Modul
-
Hintergrundbezogene Eigenschaften: