Slika v ozadju - CSS-triki

Anonim

background-imageHotel v CSS uporablja grafiko (npr PNG, SVG, JPG.webp, GIF, WebP) ali preliv ozadje elementa.

V CSS lahko vključite dve različni vrsti slik: običajne slike in prelivi.

Slike

Uporaba slike na ozadju je precej preprosta:

body ( background: url(sweettexture.jpg.webp); )

url()Vrednost vam omogoča, da zagotavljajo pot do datoteke za vse slike, in se bo prikazal kot ozadje za ta element.

Za URI lahko nastavite tudi podatkovni URI url(). To izgleda takole:

body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )

Ta tehnika odstrani eno zahtevo HTTP, kar je dobro. Vendar obstajajo številne slabosti, zato preden začnete zamenjati vse slike, upoštevajte vse prednosti in slabosti podatkovnih URI-jev.

Uporabite lahko tudi background-imageza sprite slike, kar je še en uporaben način za zmanjšanje zahtev HTTP.

Prelivi

Druga možnost pri uporabi ozadij je, da brskalniku naročite, naj ustvari preliv. Tu je super preprost primer linearnega gradienta:

body ( background: linear-gradient(black, white); )

Uporabite lahko tudi radialne prelive:

body ( background: radial-gradient(circle, black, white); )

Tehnično gledano so prelivi le še ena oblika slike v ozadju. Razlika je v tem, da brskalnik naredi sliko namesto vas. Kako jih napisati: Sintaksa gradienta CSS3

Zgornji primer uporablja samo en gradient, lahko pa tudi več gradientov položite drug na drugega. S to tehniko lahko ustvarite nekaj precej neverjetnih vzorcev.

Nastavitev rezervne barve

Če se slika ozadja ne naloži ali si ozadje gradienta ogledate v brskalniku, ki ne podpira prelivov, bo brskalnik barvo ozadja poiskal kot rezervno. Rezervno barvo lahko določite tako:

body ( background: url(sweettexture.jpg.webp) blue; )

Več slik v ozadju

Za ozadje lahko uporabite več slik ali mešanico slik in prelivov. Zdaj je dobro podprtih več slik v ozadju (vsi sodobni brskalniki in IE9 + za grafične slike, IE10 + za prelive).

Ko uporabljate več slik v ozadju, se zavedajte, da obstaja nekoliko kontra-intuitiven vrstni red zlaganja. Navedite sliko, ki naj bo spredaj, in sliko, ki naj bo zadnja, takole:

body ( background: url(logo.png.webp), url(background-pattern.png.webp); )

Ko uporabljate več slik v ozadju, boste pogosto morali nastaviti več vrednosti za ozadje, da bo vse na pravem mestu. Če želite uporabiti backgroundokrajšavo, lahko nastavite vrednosti za vsako sliko posebej. Vaša kratica bo videti nekako takole (opazite vejico, ki ločuje prvo sliko in njene vrednosti od druge slike in njenih vrednosti):

body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )

Število slik za ozadje, ki jih lahko nastavite, ni omejeno in lahko počnete kul stvari, kot je animiranje slik v ozadju. Na blogu Davida Walsha je dober primer več slik v ozadju z animacijo.

Demo

Oglejte si sliko za ozadje pisala CSS-Tricks (@ css-tricks) na CodePen.

Sorodno

  • ozadje-priloga
  • posnetek za ozadje
  • Barva ozadja
  • izvor-izvor
  • položaj ozadja
  • ozadje-ponovitev
  • velikost ozadja

Več virov

  • Specifikacije CSS3
  • MDN
  • Popolne slike ozadja celotne strani
  • Obvladovanje gradientov CSS (Slidedeck)

Podpora za brskalnik

Redne slike delujejo povsod, več slik pa v sodobnih brskalnikih in IE9 +. Tu je podpora za prelive:

Chrome Safari Firefox Opera IE Android iOS
10+ 5.1+ 3,6+ 12,1+ 10+ 4+ 5.1+