Die background-imageEigenschaft in CSS wendet eine Grafik (z. B. PNG, SVG, JPG.webp, GIF, WEBP) oder einen Verlauf auf den Hintergrund eines Elements an.
Es gibt zwei verschiedene Arten von Bildern, die Sie in CSS aufnehmen können: normale Bilder und Verläufe.
Bilder
Die Verwendung eines Bildes auf einem Hintergrund ist ziemlich einfach:
body ( background: url(sweettexture.jpg.webp); )Mit diesem url()Wert können Sie einen Dateipfad für jedes Bild angeben, der als Hintergrund für dieses Element angezeigt wird.
Sie können auch einen Daten-URI für die festlegen url(). Das sieht so aus:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Diese Technik entfernt eine HTTP-Anforderung, was eine gute Sache ist. Es gibt jedoch eine Reihe von Nachteilen. Bevor Sie mit dem Ersetzen aller Ihrer Bilder beginnen, sollten Sie alle Vor- und Nachteile von Daten-URIs berücksichtigen.
Sie können auch background-imageBilder spritzen. Dies ist eine weitere nützliche Methode zum Reduzieren von HTTP-Anforderungen.
Farbverläufe
Eine weitere Option bei der Verwendung von Hintergründen besteht darin, den Browser anzuweisen, einen Verlauf zu erstellen. Hier ist ein super-super einfaches Beispiel für einen linearen Gradienten:
body ( background: linear-gradient(black, white); )Sie können auch radiale Farbverläufe verwenden:
body ( background: radial-gradient(circle, black, white); )Technisch gesehen sind Farbverläufe nur eine andere Form des Hintergrundbildes. Der Unterschied besteht darin, dass der Browser das Bild für Sie erstellt. So schreiben Sie sie: CSS3-Verlaufssyntax
Im obigen Beispiel wird nur ein Farbverlauf verwendet. Sie können jedoch auch mehrere Farbverläufe übereinander legen. Es gibt einige ziemlich erstaunliche Muster, die Sie mit dieser Technik erstellen können.
Einstellen einer Fallback-Farbe
Wenn ein Hintergrundbild nicht geladen werden kann oder Ihr Verlaufshintergrund in einem Browser angezeigt wird, der keine Verläufe unterstützt, sucht der Browser nach einer Hintergrundfarbe als Fallback. Sie können Ihre Fallback-Farbe folgendermaßen angeben:
body ( background: url(sweettexture.jpg.webp) blue; )Mehrere Hintergrundbilder
Sie können mehrere Bilder oder eine Mischung aus Bildern und Verläufen für Ihren Hintergrund verwenden. Mehrere Hintergrundbilder werden jetzt gut unterstützt (alle modernen Browser und IE9 + für Grafiken, IE10 + für Farbverläufe).
Wenn Sie mehrere Hintergrundbilder verwenden, beachten Sie, dass die Stapelreihenfolge etwas kontraintuitiv ist. Listen Sie das Bild, das zuerst vorne und das letzte Bild hinten sein sollte, wie folgt auf:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Wenn Sie mehrere Hintergrundbilder verwenden, müssen Sie häufig mehr Werte für den Hintergrund festlegen, damit alles am richtigen Ort ist. Wenn Sie die backgroundKurzform verwenden möchten , können Sie die Werte für jedes Bild einzeln festlegen. Ihre Kurzschrift sieht ungefähr so aus (beachten Sie das Komma, das das erste Bild und seine Werte vom zweiten Bild und seinen Werten trennt):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Es gibt keine Begrenzung für die Anzahl der Hintergrundbilder, die Sie festlegen können, und Sie können coole Dinge tun, z. B. Ihre Hintergrundbilder animieren. Es gibt ein gutes Beispiel für mehrere Hintergrundbilder mit Animation in David Walshs Blog.
Demo
Siehe das Stift-Hintergrundbild von CSS-Tricks (@ css-Tricks) auf CodePen.
verbunden
- Hintergrund-Anhang
- Hintergrund-Clip
- Hintergrundfarbe
- Hintergrundherkunft
- Hintergrundposition
- Hintergrund Wiederholung
- Hintergrundgröße
Mehr Ressourcen
- Die CSS3-Spezifikation
- MDN
- Perfekte ganzseitige Hintergrundbilder
- Beherrschen von CSS-Verläufen (Slidedeck)
Browser-Unterstützung
Normale Bilder funktionieren überall und mehrere Bilder funktionieren in modernen Browsern und IE9 +. Hier ist die Unterstützung für Farbverläufe:
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3,6+ | 12.1+ | 10+ | 4+ | 5.1+ |