background-imageĪpašums CSS piemēro grafiku (piemēram, PNG, SVG, JPG.webp, GIF, WebP) vai gradientu uz fona elements.
CSS var iekļaut divu veidu attēlus: parastie attēli un gradienti.
Attēli
Attēla izmantošana uz fona ir diezgan vienkārša:
body ( background: url(sweettexture.jpg.webp); )url()Vērtība, ļauj nodrošināt faila ceļu uz jebkuru attēlu, un tas parādās kā fonu uz šo elementu.
Varat arī iestatīt datu URI url(). Tas izskatās šādi:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Šī tehnika noņem vienu HTTP pieprasījumu, kas ir laba lieta. Bet ir vairākas ēnas puses, tāpēc, pirms sākat nomainīt visus attēlus, noteikti apsveriet visus datu URI plusus un mīnusus.
Varat arī izmantot, background-imagelai izvilktu attēlus, kas ir vēl viena noderīga metode HTTP pieprasījumu samazināšanai.
Slīpumi
Vēl viena iespēja, izmantojot fonus, ir ieteikt pārlūkam izveidot gradientu. Lūk, ļoti vienkāršs lineārā gradienta piemērs:
body ( background: linear-gradient(black, white); )Varat arī izmantot radiālos gradientus:
body ( background: radial-gradient(circle, black, white); )Tehniski runājot, gradienti ir tikai vēl viena fona attēla forma. Atšķirība ir tāda, ka pārlūks izveido attēlu jums. To rakstīšana notiek šādi: CSS3 gradienta sintakse
Iepriekš minētajā piemērā tiek izmantots tikai viens gradients, taču jūs varat arī slāņot vairākus gradientus viens otram. Ir daži diezgan pārsteidzoši modeļi, kurus varat izveidot, izmantojot šo tehniku.
Fallback Color iestatīšana
Ja fona attēlu neizdodas ielādēt vai gradienta fons tiek skatīts pārlūkprogrammā, kas neatbalsta gradientus, pārlūks meklēs fona krāsu kā rezerves variantu. Varat savu rezerves krāsu norādīt šādi:
body ( background: url(sweettexture.jpg.webp) blue; )Vairāki fona attēli
Fonam varat izmantot vairākus attēlus vai attēlu un gradientu maisījumu. Vairāki fona attēli tagad ir labi atbalstīti (visas mūsdienu pārlūkprogrammas un IE9 + grafiskajiem attēliem, IE10 + gradientiem).
Ja izmantojat vairākus fona attēlus, ņemiet vērā, ka kraušanas kārtība ir nedaudz pretin intuitīva. Uzskaitiet attēlu, kuram vispirms jābūt priekšā, un attēlu, kuram jābūt aizmugurē, šādi:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Ja izmantojat vairākus fona attēlus, jums bieži būs jāiestata vairāk fona vērtību, lai viss būtu īstajā vietā. Ja vēlaties izmantot backgroundstenogrāfiju, varat katram attēlam iestatīt vērtības atsevišķi. Jūsu stenogrāfija izskatīsies apmēram šādi (ievērojiet komatu, kas atdala pirmo attēlu un tā vērtības no otrā attēla un tā vērtībām):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Fona attēlu iestatīšanai nav ierobežojumu, un jūs varat darīt foršas lietas, piemēram, animēt savus fona attēlus. Deivida Volša emuārā ir labs vairāku fona attēlu ar animāciju piemērs.
Demonstrācija
Skatiet CSP-Tricks pildspalvas fona attēlu (@ css-tricks) vietnē CodePen.
Saistīts
- fona piestiprināšana
- fona klips
- fona krāsa
- fona izcelsme
- background-position
- fona atkārtojums
- fona lielums
Vairāk resursu
- CSS3 spec
- MDN
- Perfekti pilnas lapas fona attēli
- CSS gradientu apgūšana (Slidedeck)
Pārlūka atbalsts
Regulāri attēli darbojas visur, un vairāki attēli darbojas mūsdienu pārlūkprogrammās un IE9 +. Šeit ir atbalsts gradientiem:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3.6+ | 12.1+ | 10+ | 4+ | 5.1+ |