Pozadina-slika - CSS-trikovi

Anonim

background-imageNekretnina u CSS vrijedi grafički (npr PNG, SVG, JPG.webp, GIF, webp) ili gradijent pozadini nekog elementa.

Postoje dvije različite vrste slika koje možete uključiti u CSS: redovite slike i gradijenti.

Slike

Korištenje slike na pozadini prilično je jednostavno:

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

url()Vrijednost omogućuje pružanje put datoteke na bilo koju sliku, a ona će se pojaviti kao podloga za taj element.

Također možete postaviti URI podataka za url(). To izgleda ovako:

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

Ovom se tehnikom uklanja jedan HTTP zahtjev, što je dobro. No, postoji niz loših strana, pa prije nego što započnete zamjenu svih slika, uzmite u obzir sve prednosti i nedostatke URI-ja podataka.

Također možete koristiti background-imageza prikazivanje slika, što je još jedna korisna metoda za smanjenje HTTP zahtjeva.

Gradijenti

Druga mogućnost prilikom upotrebe pozadina je reći pregledniku da stvori gradijent. Evo super-super jednostavnog primjera linearnog gradijenta:

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

Također možete koristiti radijalne gradijente:

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

Tehnički gledano, gradijenti su samo još jedan oblik pozadinske slike. Razlika je u tome što preglednik izrađuje sliku umjesto vas. Evo kako ih napisati: CSS3 sintaksa gradijenta

Gornji primjer koristi samo jedan gradijent, ali također možete slojiti više gradijenata jedan iznad drugog. Postoji nekoliko prilično nevjerojatnih uzoraka koje možete stvoriti pomoću ove tehnike.

Postavljanje rezervne boje

Ako se pozadinska slika ne uspije učitati ili se vaša pozadina gradijenta gleda u pregledniku koji ne podržava gradijente, preglednik će tražiti boju pozadine kao zamjensku. Možete odrediti svoju zamjensku boju ovako:

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

Više pozadinskih slika

Za pozadinu možete koristiti više slika ili mješavinu slika i gradijenata. Više slika u pozadini sada je dobro podržano (svi moderni preglednici i IE9 + za grafičke slike, IE10 + za gradijente).

Kada koristite više pozadinskih slika, imajte na umu da postoji pomalo kontra-intuitivan redoslijed slaganja. Navedite sliku koja bi trebala biti sprijeda, a posljednju straga, ovako:

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

Kada koristite više pozadinskih slika, često ćete trebati postaviti više vrijednosti za pozadinu da biste sve postavili na pravo mjesto. Ako želite koristiti backgroundskraćenicu, možete postaviti vrijednosti za svaku sliku pojedinačno. Vaša će stenografija izgledati otprilike ovako (primijetite zarez koji odvaja prvu sliku i njezine vrijednosti od druge slike i njezinih vrijednosti):

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

Ne možete ograničiti koliko pozadinskih slika možete postaviti, a možete raditi i cool stvari poput animiranja pozadinskih slika. Na blogu Davida Walsha postoji dobar primjer više pozadinskih slika s animacijom.

Demo

Pogledajte pozadinsku sliku olovke od CSS-Tricks (@ css-tricks) na CodePenu.

Povezano

  • pozadina-prilog
  • pozadina-isječak
  • boja pozadine
  • podrijetlo podrijetla
  • pozadinski položaj
  • pozadina-ponavljanje
  • veličina pozadine

Više resursa

  • Specifikacije CSS3
  • MDN
  • Savršene pozadinske slike na cijeloj stranici
  • Ovladavanje CSS gradijentima (Slidedeck)

Podrška preglednika

Redovne slike rade posvuda, a više slika radi u modernim preglednicima i IE9 +. Evo podrške za gradijente:

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