Den background-imageejendom i CSS anvender en grafisk (f.eks PNG, SVG, JPG.webp, GIF, WebP) eller gradient til baggrunden af et element.
Der er to forskellige typer billeder, du kan medtage i CSS: almindelige billeder og gradienter.
Billeder
Brug af et billede på en baggrund er ret simpelt:
body ( background: url(sweettexture.jpg.webp); )Den url()værdi gør det muligt at give en fil sti til et billede, og det vil vise sig som baggrund for dette element.
Du kan også indstille en data-URI til url(). Det ser sådan ud:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Denne teknik fjerner en HTTP-anmodning, hvilket er en god ting. Men der er en række ulemper, så inden du begynder at erstatte alle dine billeder, skal du sørge for at overveje alle fordele og ulemper ved Data URI'er.
Du kan også bruge background-imagetil at sprite billeder, hvilket er en anden nyttig metode til at reducere HTTP-anmodninger.
Forløb
En anden mulighed, når du bruger baggrunde, er at fortælle browseren at oprette en gradient. Her er et super-duper simpelt eksempel på en lineær gradient:
body ( background: linear-gradient(black, white); )Du kan også bruge radiale gradienter:
body ( background: radial-gradient(circle, black, white); )Teknisk set er gradienter bare en anden form for baggrundsbillede. Forskellen er, at browseren laver billedet til dig. Sådan skriver du dem: CSS3 Gradient Syntax
Eksemplet ovenfor bruger kun en gradient, men du kan også lag flere gradienter oven på hinanden. Der er nogle ret fantastiske mønstre, du kan oprette ved hjælp af denne teknik.
Indstilling af en tilbagefaldsfarve
Hvis et baggrundsbillede ikke indlæses, eller din gradientbaggrund vises i en browser, der ikke understøtter forløb, vil browseren se efter en baggrundsfarve som en reserve. Du kan angive din reservefarve således:
body ( background: url(sweettexture.jpg.webp) blue; )Flere baggrundsbilleder
Du kan bruge flere billeder eller en blanding af billeder og gradienter til din baggrund. Flere baggrundsbilleder understøttes nu (alle moderne browsere og IE9 + til grafiske billeder, IE10 + til gradienter).
Når du bruger flere baggrundsbilleder, skal du være opmærksom på, at der er en noget kontraintuitiv stable rækkefølge. Skriv det billede, der skal være forrest først, og billedet, der skal sidst sidst, sådan her:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Når du bruger flere baggrundsbilleder, skal du ofte indstille flere værdier til baggrunden for at få alt på det rigtige sted. Hvis du vil bruge backgroundstenografien, kan du indstille værdierne for hvert billede individuelt. Din stenografi vil se sådan ud (bemærk det komma, der adskiller det første billede og dets værdier fra det andet billede og dets værdier):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Der er ingen grænse for, hvor mange baggrundsbilleder du kan indstille, og du kan gøre seje ting som at animere dine baggrundsbilleder. Der er et godt eksempel på flere baggrundsbilleder med animation på David Walshs blog.
Demo
Se pennens baggrundsbillede af CSS-Tricks (@ css-tricks) på CodePen.
Relaterede
- baggrund-vedhæftet fil
- baggrund-klip
- baggrundsfarve
- baggrund-oprindelse
- baggrund-position
- baggrund-gentagelse
- baggrundsstørrelse
Flere ressourcer
- CSS3-specifikationen
- MDN
- Perfekte baggrundsbilleder på fuld side
- Mastering af CSS-gradienter (glideafslutning)
Browsersupport
Almindelige billeder fungerer overalt, og flere billeder fungerer i moderne browsere og IE9 +. Her er supporten til gradienter:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3.6+ | 12.1+ | 10+ | 4+ | 5.1+ |