Den background-imageegenskap i CSS applicerar ett grafiskt (t.ex. PNG, SVG, JPG.webp, GIF, WebP) eller gradient till bakgrunden av ett element.
Det finns två olika typer av bilder som du kan inkludera med CSS: vanliga bilder och övertoningar.
Bilder
Att använda en bild på en bakgrund är ganska enkel:
body ( background: url(sweettexture.jpg.webp); )Det url()värdet kan du ge en sökväg till en bild, och det kommer att dyka upp som bakgrund för det elementet.
Du kan också ställa in en data-URI för url(). Det ser ut så här:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Denna teknik tar bort en HTTP-begäran, vilket är bra. Men det finns ett antal nackdelar, så innan du börjar ersätta alla dina bilder, se till att du överväger alla fördelar och nackdelar med Data URI.
Du kan också använda för background-imageatt sprite bilder, vilket är en annan användbar metod för att minska HTTP-förfrågningar.
Lutningar
Ett annat alternativ när du använder bakgrunder är att be webbläsaren att skapa en lutning. Här är ett superduper enkelt exempel på en linjär gradient:
body ( background: linear-gradient(black, white); )Du kan också använda radiella lutningar:
body ( background: radial-gradient(circle, black, white); )Tekniskt sett är lutningar bara en annan form av bakgrundsbild. Skillnaden är att webbläsaren gör bilden åt dig. Så här skriver du dem: CSS3 Gradient Syntax
I exemplet ovan används endast en lutning, men du kan också lägga flera lutningar ovanpå varandra. Det finns några ganska fantastiska mönster som du kan skapa med den här tekniken.
Ställa in en reservfärg
Om en bakgrundsbild inte kan laddas, eller om din tonad bakgrund visas i en webbläsare som inte stöder övertoningar, kommer webbläsaren att leta efter en bakgrundsfärg som reserv. Du kan ange din reservfärg så här:
body ( background: url(sweettexture.jpg.webp) blue; )Flera bakgrundsbilder
Du kan använda flera bilder, eller en blandning av bilder och övertoningar, för din bakgrund. Flera bakgrundsbilder stöds nu (alla moderna webbläsare och IE9 + för grafiska bilder, IE10 + för övertoningar).
När du använder flera bakgrundsbilder, tänk på att det finns en något kontraintuitiv staplingsordning. Lista bilden som ska vara längst fram först och bilden som ska vara längst bak, så här:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )När du använder flera bakgrundsbilder måste du ofta ställa in fler värden för bakgrunden för att få allt på rätt plats. Om du vill använda backgroundförkortningen kan du ställa in värdena för varje bild individuellt. Din stenografi kommer att se ut ungefär så här (se kommat som skiljer den första bilden och dess värden från den andra bilden och dess värden):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Det finns ingen gräns för hur många bakgrundsbilder du kan ställa in, och du kan göra coola saker som att animera dina bakgrundsbilder. Det finns ett bra exempel på flera bakgrundsbilder med animering på David Walshs blogg.
Demo
Se Penns bakgrundsbild av CSS-Tricks (@ css-tricks) på CodePen.
Relaterad
- bakgrundsbilaga
- bakgrund-klipp
- bakgrundsfärg
- bakgrund-ursprung
- bakgrundsposition
- bakgrund-upprepa
- bakgrundsstorlek
Fler resurser
- CSS3-specifikationen
- MDN
- Perfekt helsides bakgrundsbilder
- Behärskar CSS-lutningar (gliddäck)
Webbläsarstöd
Vanliga bilder fungerar överallt, och flera bilder fungerar i moderna webbläsare och IE9 +. Här är stödet för lutningar:
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3.6+ | 12.1+ | 10+ | 4+ | 5.1+ |