Tämä opinto-opas näyttää, kuinka taustakuvia käytetään CSS:n kanssa. Joten, aloitetaan!
Kuinka käyttää useita taustakuvia CSS:n avulla?
CSS' tausta ”-ominaisuus on lyhennelmä ominaisuus, joka sisältää taustan, taustaliitteen, leikkeen, kuvan, toiston, alkuperän, koon ja sijainnin ominaisuudet. Taustaominaisuutta voidaan käyttää useiden kuvien URL-osoitteiden määrittämiseen. Nämä kuvat sijoitetaan ja asetetaan sen mukaisesti.
Otetaan esimerkki, jossa yksi div-elementti sisältää vain yhden kuvan verkkosivun logona, kun taas toinen sisältää kolme kuvaa.
Esimerkki: Useiden taustakuvien lisääminen CSS:llä
Lisää HTML:ään logolle div-elementti ja määritä luokan nimi. Esimerkiksi annoimme sille nimeksi ' logo ”. Toinen div käyttää useita kuvia, joten annoimme sille nimen ' useita kuvia ”. Voit kuitenkin määrittää luokan nimen mieltymystesi mukaan.
HTML
< div luokkaa = 'logo' >< / div >< div luokkaa = 'useita kuvia' >< / div >
Seuraavassa osiossa säädämme kuvia käyttämällä CSS-taustaominaisuutta.
Tyyli 'logo' jako
.logo {leveys : 100 % ;
korkeus : 50 pikseliä ;
pehmuste : 5px ;
marginaali : 5px ;
taustan kokoinen : 100 pikseliä ;
taustatoisto : ei-toistoa ;
taustakuva : url ( images/linux-logo.png ) ;
}
Div-elementti luokan kanssa ' logo ' on käytössä seuraavilla ominaisuuksilla:
- ' leveys ' -ominaisuutta käytetään elementin leveyden asettamiseen ' 100 % ”.
- ' korkeus ' -ominaisuutta käytetään elementin korkeuden asettamiseen ' 50 pikseliä ”.
- ' pehmuste '-ominaisuutta käytetään ' 5px ” tilaa elementin määritetyn sisällön ympärillä.
- ' marginaali '-ominaisuutta käytetään ' 5px ” tilaa elementin ympärillä.
- ' taustan kokoinen '-ominaisuus asettaa elementin taustakuvan kooksi ' 100 pikseliä ”.
- ' taustatoisto ' arvolla ' ei-toistoa ' näyttää taustan vain kerran.
- ' taustakuva ' -ominaisuutta käytetään kuvan URL-osoitteen määrittämiseen.
Tyyli 'useita kuvia' jako
.multiple-images {leveys : 90 % ;
korkeus : 45vh ;
marginaali : 1px auto ;
pehmuste : 20px ;
taustan kokoinen : 150 pikseliä ;
taustaväri : rgb ( 157 , 154 , 151 ) ;
taustakuva : url ( images/office.png ) , url ( images/html.png ) , url ( images/laptop.png ) ;
taustatoisto : ei-toistoa , ei-toistoa , ei-toistoa ;
tausta-asento : vasemmalle , keskusta , oikein ;
}
Muotoile nyt toinen säilö seuraavasti:
- ' taustaväri ”-ominaisuus määrittää elementin taustan värin.
- ' taustakuva ”-ominaisuus määrittää useita kuvien URL-osoitteita.
- ' taustatoisto ”-ominaisuus asettaa arvot kuville taustakuva-ominaisuudessa määritettyjen kuvien sarjassa. Molemmat kuvat on asetettu ei-toistuviksi eli ne näkyvät selaimessa vain kerran.
- ' tausta-asento ” säätää kuvan sijaintia background-image-ominaisuuden määrittämässä kuvien järjestyksessä. Ensimmäinen kuva asetetaan vasemmalle puolelle, toinen keskelle ja kolmas oikealle puolelle.
Kun annat yllä olevan koodin, tulos näyttää selaimessa tältä:
Tällä tavalla voimme säätää useiden kuvien sijaintia CSS:llä.
Johtopäätös
Jotta sovellus olisi viihdyttävä ja interaktiivinen, kehittäjät käyttävät erilaisia kuvia ja värejä. Voimme asettaa useita kuvia CSS-taustaominaisuuksilla, kuten taustan sijainti, taustan toisto, taustan koko ja paljon muuta. Tämä opas on osoittanut useiden taustakuvien käytön CSS-esimerkein.