background-imageProprietatea în CSS se aplică un element grafic ( de exemplu , PNG, SVG, JPG.webp, GIF, WebP) sau gradient la fundalul unui element.
Există două tipuri diferite de imagini pe care le puteți include cu CSS: imagini obișnuite și gradiente.
Imagini
Utilizarea unei imagini pe fundal este destul de simplă:
body ( background: url(sweettexture.jpg.webp); )url()Valoarea vă permite să ofere o cale de fișier pentru orice imagine, și va apărea ca fundal pentru acel element.
De asemenea, puteți seta un URI de date pentru url(). Arată așa:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Această tehnică elimină o solicitare HTTP, ceea ce este un lucru bun. Dar există o serie de dezavantaje, deci înainte de a începe să înlocuiți toate imaginile, asigurați-vă că luați în considerare toate avantajele și dezavantajele URI-urilor de date.
Puteți utiliza, de asemenea, background-imagepentru a sprite imagini, care este o altă metodă utilă pentru reducerea solicitărilor HTTP.
Gradienți
O altă opțiune atunci când utilizați fundaluri este să spuneți browserului să creeze un gradient. Iată un exemplu simplu super-duper de gradient liniar:
body ( background: linear-gradient(black, white); )De asemenea, puteți utiliza gradienți radiali:
body ( background: radial-gradient(circle, black, white); )Din punct de vedere tehnic, gradienții sunt doar o altă formă de imagine de fundal. Diferența este că browserul creează imaginea pentru dvs. Iată cum să le scriem: CSS3 Gradient Syntax
Exemplul de mai sus folosește un singur gradient, dar puteți, de asemenea, să acoperiți mai multe gradiente unul peste celălalt. Există câteva modele destul de uimitoare pe care le puteți crea folosind această tehnică.
Setarea unei culori de rezervă
Dacă o imagine de fundal nu se încarcă sau fundalul dvs. de gradient este vizualizat pe un browser care nu acceptă gradientele, browserul va căuta o culoare de fundal ca rezervă. Puteți specifica culoarea de rezervă astfel:
body ( background: url(sweettexture.jpg.webp) blue; )Imagini de fundal multiple
Puteți utiliza mai multe imagini sau un amestec de imagini și degrade pentru fundal. Imaginile de fundal multiple sunt bine acceptate acum (toate browserele moderne și IE9 + pentru imagini grafice, IE10 + pentru gradiente).
Când utilizați mai multe imagini de fundal, rețineți că există o ordine de stivuire oarecum contra-intuitivă. Enumerați imaginea care ar trebui să fie mai întâi în partea din față și imaginea care ar trebui să fie în partea din spate ultima, astfel:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Când utilizați mai multe imagini de fundal, va trebui adesea să setați mai multe valori pentru fundal pentru a obține totul în locul potrivit. Dacă doriți să utilizați backgroundstenograma, puteți seta individual valorile pentru fiecare imagine. Stenograma dvs. va arăta cam așa (observați virgula care separă prima imagine și valorile sale de a doua imagine și valorile sale):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Nu există limită la numărul de imagini de fundal pe care le puteți seta și puteți face lucruri interesante, cum ar fi să vă animați imaginile de fundal. Există un bun exemplu de imagini de fundal multiple cu animație pe blogul lui David Walsh.
Demo
Vedeți imaginea de fundal Pen de la CSS-Tricks (@ css-tricks) pe CodePen.
Legate de
- atașament de fundal
- clip de fundal
- culoare de fundal
- fundal-origine
- fundal-poziție
- fundal-repetare
- dimensiunea fundalului
Mai multe resurse
- Specificația CSS3
- MDN
- Imagini de fundal de pagină completă perfectă
- Stăpânirea gradienților CSS (Slidedeck)
Suport pentru browser
Imaginile obișnuite funcționează peste tot, iar mai multe imagini funcționează în browsere moderne și IE9 +. Iată suportul pentru degradeuri:
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Peste 10 ani | 5.1+ | 3.6+ | 12.1+ | Peste 10 ani | 4+ | 5.1+ |