Jos olet verkkosivuston suunnittelu, saatat olla kiinnostunut oppimaan kiinteän taustakuvan tai vesileiman luomisen verkkosivulle. Tämä on yleinen muotoiluhoito, joka on ollut suosittu verkossa jo jonkin aikaa. Se on kätevä vaikutus, kun sinulla on web-suunnittelupaketti temppuja.
Jos et ole tehnyt sitä aiemmin tai olet kokeillut sitä aiemmin ilman onnea, prosessi saattaa tuntua pelottavalta, mutta se ei todellakaan ole kovin vaikeaa. Tämän lyhyen opetusohjelman avulla saat tarvittavat tiedot tekniikan oppimiseen muutamassa minuutissa CSS: n avulla.
Päästä alkuun
Taustakuvilla tai vesileimillä (jotka ovat oikeastaan vain hyvin vaaleat taustakuvat) on historia painetussa suunnittelussa. Asiakirjoissa on jo pitkään ollut vesileimoja, jotta estetään niiden kopioiminen. Lisäksi monet esitteet ja esitteet käyttävät suuria taustakuvia osana painetun kappaleen suunnittelua. Verkkosuunnittelu on pitkään lainannut tyylejä painotuotteista, ja taustakuvat ovat yksi näistä lainatuista tyyleistä.
Nämä suuret taustakuvat on helppo luoda seuraavien kolmen avulla CSS-tyyli ominaisuudet:
- taustakuva
- tausta-toisto
- tausta-kiinnitys
- taustakoko
Taustakuva
Määrität vesileimana käytettävän kuvan taustakuvan avulla. Tämä tyyli yksinkertaisesti käyttää tiedostopolkua sivustollasi olevan kuvan lataamiseen, todennäköisesti nimettyyn hakemistoon kuvia.
taustakuva: url (/images/page-background.jpg);
On tärkeää, että kuva itsessään on vaaleampi tai läpinäkyvämpi kuin normaali kuva. Tämä luovesileima"ilme, jossa puoliksi läpinäkyvä kuva on verkkosivun tekstin, grafiikan ja muiden pääelementtien takana. Ilman tätä vaihetta taustakuva kilpailee sivusi tietojen kanssa ja vaikeuttaa lukemista.
Voit säätää taustakuvan missä tahansa muokkausohjelmassa, kuten Adobe Photoshop.
Tausta-toisto
Tausta-toisto-ominaisuus tulee seuraavaksi. Jos haluat kuvasi olevan suuri vesileimatyylinen grafiikka, käytä tätä ominaisuutta saadaksesi kuvan näkyviin vain kerran.
tausta-toisto: ei-toista;
Ilman ei toista ominaisuus, oletusarvo on, että kuva toistuu uudestaan ja uudestaan sivulla. Tämä ei ole toivottavaa useimmissa nykyaikaisissa verkkosivujen suunnittelussa, joten tätä tyyliä on pidettävä välttämättömänä CSS: ssäsi.
Tausta-Liite
Tausta-kiinnitys on ominaisuus, jonka monet web-suunnittelijat unohtavat. Sen käyttäminen pitää taustakuvasi kiinteänä, kun käytät kiinteä omaisuus. Se tekee kuvasta vesileiman, joka on kiinnitetty sivulle.
Tämän ominaisuuden oletusarvo on vieritä. Jos et määritä taustaliitteen arvoa, tausta vierittää sivun loppua.
taustakiinnitys: kiinteä;
Taustakoko
Taustakoko on uudempi CSS-ominaisuus. Sen avulla voit asettaa taustan koon sen näkymän perusteella, jota sitä katsellaan. Tämä on erittäin hyödyllistä reagoivat verkkosivustot joka näkyy erikokoisina eri laitteilla.
taustakoko: kansi;
Kaksi hyödyllistä arvoa, joita voit käyttää tässä ominaisuudessa, ovat:
- Peite - Skaalaa taustan niin, että joko koko leveys tai koko korkeus näytetään. Tämä tarkoittaa, että jotkin kuvan osat eivät välttämättä näy näytöllä, mutta koko alue peitetään.
- Sisältää - Skaalaa kuvan niin, että sekä koko leveys että korkeus näkyvät muotoiltavalla alueella. Kuva ei ole leikattu, mutta haittapuoli on, että osa alueen ei välttämättä peitä kuvaa.
CSS: n lisääminen sivullesi
Kun olet ymmärtänyt yllä olevat ominaisuudet ja niiden arvot, voit lisätä nämä tyylit verkkosivustoosi.
Lisää seuraava verkkosivusi HEAD-kohtaan, jos olet tekemässä yhden sivun sivustoa. Lisää se ulkoisen tyylitaulukon CSS-tyyleihin, jos rakennat monisivuista sivustoa ja haluat hyödyntää ulkoisen taulukon tehoa.
Muuta taustakuvan URL-osoite vastaamaan tiettyä sivustosi kannalta merkityksellistä tiedostonimeä ja tiedostopolkua. Tee kaikki muut sopivat muutokset myös muotoilusi mukaan ja sinulla on vesileima.
Voit määrittää myös sijainnin
Jos haluat sijoittaa vesileiman tiettyyn paikkaan verkkosivullasi, voit tehdä sen myös. Voit esimerkiksi haluta vesileiman sivun keskelle tai ehkä alareunaan, toisin kuin yläkulma, joka on oletusarvo.
Voit tehdä tämän lisäämällä tausta-sijainti-ominaisuuden tyyliisi. Tämä sijoittaa kuvan tarkalleen haluamaasi paikkaan. Voit käyttää pikseliarvoja, prosenttiosuuksia tai tasauksia saavuttaaksesi paikannusvaikutuksen.
taustan sijainti: keskellä;