background-imageVara CSS kehtib graafilise (nt PNG, SVG, JPG.webp, GIF, WebP) või gradient tausta elemendi.
CSS-iga saate lisada kahte erinevat tüüpi pilti: tavalised pildid ja gradientid.
Kujutised
Pildi kasutamine taustal on üsna lihtne:
body ( background: url(sweettexture.jpg.webp); )url()Väärtus lubab pakkuda faili tee ühtegi pilti, ja see näitab kui taustal, et element.
Samuti saate seadistada andmele URI url(). See näeb välja selline:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )See tehnika eemaldab ühe HTTP-päringu, mis on hea. Kuid on mitmeid varjukülgi, nii et enne kõigi piltide väljavahetamise alustamist veenduge, et arvestaksite andmete URI-de kõiki plusse ja miinuseid.
Võite kasutada ka background-imagepiltide viimistlemiseks, mis on veel üks kasulik meetod HTTP-päringute vähendamiseks.
Gradiendid
Teine võimalus taustade kasutamisel on käsk brauseril gradient luua. Siin on lineaarse gradiendi super-duper lihtne näide:
body ( background: linear-gradient(black, white); )Võite kasutada ka radiaalseid gradiente:
body ( background: radial-gradient(circle, black, white); )Tehniliselt öeldes on gradiendid vaid üks taustpildi vorm. Erinevus seisneb selles, et brauser teeb teile pildi. Nende kirjutamiseks tehke järgmist: CSS3 gradientsüntaks
Ülaltoodud näites kasutatakse ainult ühte gradienti, kuid võite ka mitu gradienti üksteise peale kihistada. Selle tehnika abil saate luua üsna hämmastavaid mustreid.
Varuvärvi määramine
Kui taustpilti ei õnnestu laadida või kui teie gradienttausta vaadatakse brauseris, mis ei toeta gradiente, otsib brauser varuvärvina taustavärvi. Varuvärvi saate määrata järgmiselt:
body ( background: url(sweettexture.jpg.webp) blue; )Mitu taustapilti
Taustaks saate kasutada mitut pilti või piltide ja gradientide segu. Mitu taustapilti on nüüd hästi toetatud (kõik kaasaegsed brauserid ja IE9 + graafiliste piltide jaoks, IE10 + gradientide jaoks).
Kui kasutate mitut taustpilti, pidage meeles, et virnastamise järjekord on mõnevõrra vastuoluline. Loetlege pilt, mis peaks olema esiküljel, ja pilt, mis peaks olema tagaküljel, järgmiselt:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Mitme taustpildi kasutamisel peate sageli seadma taustale rohkem väärtusi, et kõik oleks õiges kohas. Kui soovite kasutada backgroundstenogrammi, saate väärtused määrata igale pildile eraldi. Teie stenogramm näeb välja umbes selline (märkage koma, mis eraldab esimese pildi ja selle väärtused teisest pildist ja selle väärtustest):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Taustapiltide seadmiseks pole piiranguid ja saate teha lahedaid asju, näiteks animeerida oma taustapilte. David Walshi ajaveebis on hea näide mitmest animatsiooniga taustpildist.
Demo
Vaadake CodePenil CSS-Tricksi pliiatsi taustapilti (@ css-tricks).
Seotud
- taust-kinnitus
- taustklipp
- taustavärv
- taust-päritolu
- taust-positsioon
- taust-kordus
- tausta suurus
Rohkem ressursse
- CSS3 spetsifikatsioon
- MDN
- Täiuslikud kogu lehe taustpildid
- CSS-i gradientide valdamine (Slidedeck)
Brauseri tugi
Tavapärased pildid töötavad kõikjal ja mitu pilti töötavad kaasaegsetes brauserites ja IE9 +. Gradientide tugi on järgmine:
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3.6+ | 12,1+ | 10+ | 4+ | 5.1+ |
