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.
Die background-image
CSS Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest.
Probieren Sie es aus
Die Hintergrundbilder werden in Stapelkontext-Ebenen übereinander gezeichnet. Die zuerst angegebene Ebene wird so gezeichnet, als ob sie dem Benutzer am nächsten wäre.
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 Datei, die durch die angegebene URI gekennzeichnet ist, nicht geladen werden kann), behandeln Browser es so, als wäre es ein none
Wert.
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 - beispielsweise wenn das Netzwerk ausgefallen 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, getrennt durch ein Komma, an.
Werte
none
-
Ist ein Schlüsselwort, das das Fehlen von Bildern bezeichnet.
<image>
-
Ist ein
<image>
, das das anzuzeigende Bild darstellt. Es können mehrere davon vorhanden sein, die durch Kommata getrennt sind, da mehrere Hintergründe unterstützt werden.
Barrierefreiheit
Browser stellen keine besonderen Informationen zu Hintergrundbildern für unterstützende Technologien bereit. Dies ist hauptsächlich für Bildschirmleseprogramme wichtig, da ein Bildschirmleser seine Anwesenheit nicht ankündigt und somit seinen Benutzern nichts vermittelt. Wenn das Bild Informationen enthält, die zum Verständnis des übergeordneten Zwecks der Seite wesentlich sind, ist es besser, es semantisch im Dokument zu beschreiben.
- MDN Understanding WCAG, Leitfaden 1.1 Erläuterungen
- Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
Darüber hinaus ist es wichtig sicherzustellen, dass das Kontrastverhältnis zwischen dem Hintergrundbild und dem Vordergrundtext hoch genug ist, damit Menschen mit Sehbehinderungen 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 Textinhalte und 3:1 für größeren Text wie Überschriften erforderlich. Großer Text wird als 24px oder größer definiert oder als fettgedruckt 18,66px oder größer.
Formale Definition
Initialer Wert | 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
Übereinanderliegende Hintergrundbilder
Beachten Sie, dass das Sternbild teilweise transparent ist und über dem Katzenbild liegt.
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