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 Juli 2015.
{"* "}Some parts of this feature may have varying levels of support.
Die background-image CSS Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest.
Probieren Sie es aus
background-image: url("/shared-assets/images/examples/lizard.png");
background-image:
url("/shared-assets/images/examples/lizard.png"),
url("/shared-assets/images/examples/star.png");
background-image:
url("/shared-assets/images/examples/star.png"),
url("/shared-assets/images/examples/lizard.png");
background-image:
linear-gradient(rgb(0 0 255 / 0.5), rgb(255 255 0 / 0.5)),
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%;
}
Die Hintergrundbilder werden auf Stapelkontextebenen übereinander gezeichnet. Die zuerst angegebene Ebene wird so gezeichnet, als ob sie am nächsten zum Benutzer ist.
Die Ränder des Elements werden dann darüber gezeichnet, und die background-color wird darunter gezeichnet. Wie die Bilder relativ zur Box und ihren 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 durch die angegebene URI bezeichnete Datei nicht geladen werden kann), behandeln Browser es so, als hätte es den Wert none.
Hinweis:
Auch wenn die Bilder undurchsichtig sind und die Farbe unter normalen Umständen nicht angezeigt wird, sollten Webentwickler immer eine background-color angeben. Wenn die Bilder nicht geladen werden können – zum Beispiel, wenn das Netzwerk ausgefallen ist – wird als Fallback die Hintergrundfarbe verwendet.
Syntax
/* single image */
background-image: linear-gradient(black, white);
background-image: url("cat-front.png");
/* multiple images */
background-image:
radial-gradient(circle, transparent 45%, black 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 Schlüsselwort none oder als <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 angibt.
<image>-
Ist ein
<image>Wert, der das anzuzeigende Bild angibt. Es können mehrere davon durch Kommas getrennt angegeben werden, da mehrere Hintergründe unterstützt werden.
Barrierefreiheit
Browser bieten keine speziellen Informationen zu Hintergrundbildern für unterstützende Technologien. Dies ist vor allem für Screenreader wichtig, da ein Screenreader deren Vorhandensein nicht ankündigt und somit den Benutzern nichts vermittelt. Falls das Bild Informationen enthält, die entscheidend für das Verständnis des Gesamtzwecks der Seite sind, ist es besser, es semantisch im Dokument zu beschreiben.
- MDN Verständnis von WCAG, Erklärung zu Richtlinie 1.1
- Verständnis des Erfolgskriteriums 1.1.1 | W3C Verständnis WCAG 2.0
Zusätzlich ist es wichtig sicherzustellen, dass das Kontrastverhältnis zwischen dem Hintergrundbild und dem Vordergrundtext hoch genug ist, damit Menschen mit Sehschwäche den Seiteninhalt lesen können.
Das Farbkontrastverhältnis wird bestimmt, indem die Leuchtdichte der Text- und Hintergrundfarbwerte verglichen wird. 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ößeren Text wie Überschriften erforderlich. Großer Text wird definiert als 24px oder größer oder fett 18,66px oder größer.
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 Sternbild teilweise transparent ist und über das Katzenbild gelegt 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
Loading…
Siehe auch
<img>-
Funktionsbereiche im Zusammenhang mit Bildern:
-
CSS-Bilder Modul
-
Eigenschaften im Zusammenhang mit dem Hintergrund