background-imageCSS nuosavybė taikomas grafinis (pvz PNG SVG, JPG.webp, GIF, WebP) arba gradientas prie elemento fone.
Yra du skirtingų tipų vaizdai, kuriuos galite įtraukti į CSS: įprasti vaizdai ir nuolydžiai.
Vaizdai
Vaizdo naudojimas fone yra gana paprastas:
body ( background: url(sweettexture.jpg.webp); )url()Vertė leidžia teikti failo kelią bet vaizdas, ir jis bus rodomas kaip to elemento fone.
Taip pat galite nustatyti duomenų URI url(). Tai atrodo taip:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Ši technika pašalina vieną HTTP užklausą, o tai yra geras dalykas. Tačiau yra daugybė minusų, todėl prieš pradėdami pakeisti visus vaizdus, įsitikinkite, kad apsvarstėte visus duomenų URI privalumus ir trūkumus.
Be to, galite naudoti background-imagevaizdus, kurie yra dar vienas naudingas būdas sumažinti HTTP užklausas.
Gradientai
Kita galimybė naudojant fonus yra nurodyti naršyklei sukurti gradientą. Štai labai paprastas tiesinio gradiento pavyzdys:
body ( background: linear-gradient(black, white); )Taip pat galite naudoti radialinius gradientus:
body ( background: radial-gradient(circle, black, white); )Techniškai kalbant, gradientai yra tik dar viena fono paveikslėlio forma. Skirtumas tas, kad naršyklė sukuria vaizdą už jus. Štai kaip juos parašyti: CSS3 gradiento sintaksė
Aukščiau pateiktame pavyzdyje naudojamas tik vienas gradientas, tačiau taip pat galite sluoksniuoti kelis gradientus vienas ant kito. Yra keletas nuostabių modelių, kuriuos galite sukurti naudodamiesi šia technika.
Atsarginės spalvos nustatymas
Jei nepavyksta įkelti fono paveikslėlio arba jūsų gradiento fonas peržiūrimas naršyklėje, kuri nepalaiko gradientų, naršyklė ieškos fono spalvos kaip atsarginės. Galite nurodyti savo atsarginę spalvą taip:
body ( background: url(sweettexture.jpg.webp) blue; )Keli fono vaizdai
Fonui galite naudoti kelis vaizdus arba vaizdų ir gradientų mišinį. Keli fono vaizdai dabar yra gerai palaikomi (visos šiuolaikinės naršyklės ir IE9 + grafiniams vaizdams, IE10 + gradientams).
Kai naudojate kelis fono paveikslėlius, atminkite, kad yra šiek tiek priešinga intuityvi krovimo tvarka. Išvardykite vaizdą, kuris pirmiausia turėtų būti priekyje, ir vaizdą, kuris turėtų būti paskutiniame gale, taip:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Kai naudojate kelis fono paveikslėlius, dažnai turėsite nustatyti daugiau fono verčių, kad viskas būtų tinkamoje vietoje. Jei norite naudoti backgroundtrumpinį, galite nustatyti kiekvieno vaizdo vertes atskirai. Jūsų stenografija atrodys maždaug taip (atkreipkite dėmesį į kablelį, skiriantį pirmąjį vaizdą ir jo vertes nuo antrojo atvaizdo ir jo vertes):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Nėra jokių apribojimų, kiek foninių vaizdų galite nustatyti, ir galite padaryti įdomių dalykų, pavyzdžiui, animuoti savo fono paveikslėlius. David Walsh tinklaraštyje yra geras kelių foninių vaizdų su animacija pavyzdys.
Demonstracija
Peržiūrėkite „CSS-Tricks“ rašiklio rašiklio fono paveikslėlį (@ css-tricks) „CodePen“.
Susijęs
- prisirišimas prie fono
- fono klipas
- fono spalva
- fono kilmė
- fonas-padėtis
- fonas pakartoti
- fono dydis
Daugiau išteklių
- CSS3 spec
- MDN
- Puikūs viso puslapio fono paveikslėliai
- CSS gradientų įvaldymas („Slidedeck“)
Naršyklės palaikymas
Reguliarūs vaizdai veikia visur, o keli vaizdai veikia šiuolaikinėse naršyklėse ir IE9 +. Štai parama nuolydžiams:
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3.6+ | 12.1+ | 10+ | 4+ | 5.1+ |