Suorita tekniikka CSS: llä
Jos suunnittelet verkkosivustoa, saatat olla kiinnostunut oppimaan kuinka luoda kiinteä taustakuvan tai vesileiman verkkosivulle. Tämä on yhteinen muotoilu, joka on ollut suosittu verkossa jo jonkin aikaa. Se on kätevä vaikutus, että sinulla on web-suunnittelussa pussin temppuja.
Jos et ole tehnyt tätä aiemmin tai kokeillut sitä aikaisemmin ilman onnea, prosessi voi tuntua uhkaavalta, mutta se ei todellakaan ole kovin vaikeaa. Tämän lyhyen opetusohjelman avulla saat tietoa, jota tarvitset tekniikan hallitsemiseen muutamassa minuutissa CSS: n avulla.
Päästä alkuun
Taustatiedot tai vesileimat (jotka ovat todellakin vain hyvin vaaleita taustakuvia) on painettu muotoilu. Dokumentit ovat jo pitkään sisältäneet vesileimat, jotta ne eivät kopioisi. Lisäksi monet lehtiset ja esitteet käyttävät suuria taustakuvia osana painetun kappaleen suunnittelua. Web-suunnittelussa on pitkät lainaustyylit tulosteista ja taustakuvat ovat yksi näistä lainatuista tyyleistä.
Näitä suuria taustakuvia on helppo luoda käyttäen seuraavia kolmea CSS-tyyppistä ominaisuutta:
- taustakuva
- background-repeat
- tausta-kiinnitys
- tausta-koko
Taustakuva
Käytät taustatiedostoa määritelläksesi kuvan, jota käytetään vesileimänä. Tämä tyyli yksinkertaisesti käyttää tiedostopolkua ladataksesi sivustosi, joka on todennäköisesti hakemistossa "kuvat".
taustakuva: url (/images/page-background.jpg);
On tärkeää, että kuva itsessään on kevyempi tai läpinäkyvä kuin normaali kuva. Tämä luo "vesileima" -näkymän, jossa puolivälissä oleva kuva jää sivun tekstin, grafiikan ja muiden pääelementtien taakse. Ilman tätä vaihetta taustakuva kilpailee sivusi tietojen kanssa ja vaikeuttaa niiden lukemista.
Voit säätää taustakuvan missä tahansa muokkausohjelmassa, kuten Adobe Photoshopissa.
Background-Toista
Tausta-toisto-ominaisuus tulee seuraavaksi. Jos haluat, että kuva on suuri vesileima-tyylinen grafiikka, käytä tätä ominaisuutta, jotta kuva näytetään vain kerran.
tausta-toisto: ei-toista;
Ilman "ei-toista" -ominaisuutta oletuksena on, että kuva toistuu uudestaan ja uudestaan sivulla. Tämä ei ole toivottavaa useimmissa nykyisissä verkkosivujen malleissa, joten tätä tyyliä on pidettävä välttämättömänä CSS: ssä.
Tausta-Attachment
Tausta-liite on ominaisuus, jota monet web-suunnittelijat unohtavat. Sen käyttäminen pitää taustakuvan kiinteänä, kun käytät kiinteää ominaisuutta. Tämä kuva kääntää sivulle kiinteäksi vesileimaksi.
Tämän ominaisuuden oletusarvo on "vieritä". Jos et määrittele taustaliitoksen arvoa, tausta rullaa loppuosan vieressä.
tausta-liite: kiinteä;
Background-Size
Taustan koko on uudempi CSS-ominaisuus. Sen avulla voit määrittää taustakuvan sellaisen katseluportin mukaan, jota tarkastellaan. Tämä on erittäin hyödyllistä herkästi toimiville verkkosivustoille , jotka näyttävät erikokoisina eri laitteissa .
tausta-koko: kansi;
Kaksi hyödyllistä arvoa, joita voit käyttää tähän ominaisuuteen:
- Peite - Skaalaa tausta niin, että joko koko leveys tai koko korkeus näytetään. Tämä tarkoittaa, että osa kuvista ei välttämättä näy ruudulla, vaan koko alue katetaan.
- Sisällytä - Skaalaa kuvan niin, että koko leveys ja korkeus näytetään alueelle, jolla on muotoilu. Kuva ei ole katkaistu, mutta haittapuoli on se, että kuva ei peitä alueen osia.
CSS: n lisääminen sivullesi
Kun olet ymmärtänyt edellä mainitut ominaisuudet ja niiden arvot, voit lisätä nämä tyylejä verkkosivustoosi.
Lisää seuraava sivu HEAD-sivustoosi, jos teet yhden sivun sivuston. Lisää se ulkoisen tyyliarkin CSS-tyyppeihin, jos rakennat monisivuisen sivun ja haluat hyödyntää ulkoisen arkin voimaa.