Taustakuva - CSS-temppuja

Anonim

background-imageOmaisuus CSS soveltaa graafisen (esim PNG, SVG, JPG.webp, GIF, WebP) tai kaltevuus taustalle elementin.

CSS: ään voi sisällyttää kahta erityyppistä kuvaa: tavalliset kuvat ja kaltevuudet.

Kuvat

Kuvan käyttö taustalla on melko yksinkertaista:

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

url()Arvo voit tarjota tiedoston polku mitään kuvaa, ja se näkyy taustana että elementti.

Voit myös asettaa data-URI-tunnuksen url(). Se näyttää tältä:

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

Tämä tekniikka poistaa yhden HTTP-pyynnön, mikä on hyvä asia. Mutta on olemassa useita haittoja, joten ennen kuin aloitat kaikkien kuviesi korvaamisen, varmista, että otat huomioon kaikki Data URI -etujen edut ja haitat.

Voit käyttää myös background-imagekuvien vetämiseen, mikä on toinen hyödyllinen tapa vähentää HTTP-pyyntöjä.

Liukuvärit

Toinen vaihtoehto taustoja käytettäessä on käskeä selainta luomaan kaltevuus. Tässä on super-duper yksinkertainen esimerkki lineaarisesta gradientista:

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

Voit käyttää myös säteittäisiä kaltevuuksia:

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

Teknisesti ottaen kaltevuudet ovat vain yksi taustakuvan muoto. Erona on, että selain tekee kuvan sinulle. Näin kirjoitat ne: CSS3 Gradient Syntax

Yllä olevassa esimerkissä käytetään vain yhtä liukuväriä, mutta voit myös tasoittaa useita kaltevuuksia päällekkäin. Tällä tekniikalla voit luoda melko upeita kuvioita.

Varavärin asettaminen

Jos taustakuvan lataaminen epäonnistuu tai liukuväritaustaasi tarkastellaan selaimessa, joka ei tue liukuvärjäyksiä, selain etsii taustaväriä varalla. Voit määrittää varavärisi tällä tavalla:

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

Useita taustakuvia

Voit käyttää taustallasi useita kuvia tai kuvien ja kaltevuuksien yhdistelmää. Useita taustakuvia tuetaan nyt hyvin (kaikki modernit selaimet ja IE9 + graafisten kuvien, IE10 + kaltevuudet).

Kun käytät useita taustakuvia, muista, että pinoamisjärjestys on hieman intuitiivinen. Luettele kuva, jonka tulisi olla etupuolella ensin, ja kuva, jonka pitäisi olla takana viimeisenä, näin:

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

Kun käytät useita taustakuvia, sinun on usein asetettava enemmän arvoja taustalle, jotta kaikki saadaan oikeaan paikkaan. Jos haluat käyttää backgroundlyhennettä, voit asettaa arvot jokaiselle kuvalle erikseen. Lyhytkuvasi näyttää tältä tältä (huomaa pilkku, joka erottaa ensimmäisen kuvan ja sen arvot toisesta kuvasta ja sen arvoista):

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

Asetettavien taustakuvien määrää ei ole rajoitettu, ja voit tehdä hienoja asioita, kuten animoida taustakuvasi. David Walshin blogissa on hyvä esimerkki useista animaatioita sisältävistä taustakuvista.

Demo

Katso CSS-Tricksin kynän taustakuva (@ css-tricks) CodePenistä.

Liittyvät

  • tausta-kiinnitys
  • taustaleike
  • taustaväri
  • tausta-alkuperä
  • taustan sijainti
  • tausta-toisto
  • taustakoko

Lisää resursseja

  • CSS3-tekniset tiedot
  • MDN
  • Täydelliset koko sivun taustakuvat
  • CSS-liukuvärien hallinta (Slidedeck)

Selaimen tuki

Säännölliset kuvat toimivat kaikkialla, ja useat kuvat toimivat nykyaikaisissa selaimissa ja IE9 +. Tässä on kaltevuuksien tuki:

Kromi Safari Firefox Ooppera IE Android iOS
10+ 5.1+ 3.6+ 12.1+ 10+ 4+ 5.1+