Kui sa oled veebisaidi kujundamine, võite olla huvitatud õppest, kuidas veebilehel fikseeritud taustpilti või vesimärki luua. See on tavaline disainiprotseduur, mis on veebis juba pikka aega populaarne olnud. Veebikujunduse kotis on käepärane efekt.
Kui te pole seda varem teinud või proovinud varem ilma õnneta, võib see protsess tunduda hirmutav, kuid tegelikult pole see üldse keeruline. Selle lühikese õpetuse abil saate CSS-i abil mõne minuti jooksul tehnika õppimiseks vajaliku teabe.
Alustamine
Taustpiltidel või vesimärkidel (mis on tegelikult lihtsalt väga heledad taustpildid) on trükitud kujunduses ajalugu. Dokumendid on juba ammu lisanud neile vesimärke, et vältida nende kopeerimist. Lisaks kasutavad paljud voldikud ja voldikud trükise kujunduse osana suuri taustapilte. Veebikujundus on juba ammu trükitud laene ja taustapildid on üks neist laenatud stiilidest.
Neid suuri taustapilte on lihtne luua järgmise kolme abil CSS-i stiil omadused:
- taustapilt
- taust-kordus
- taust-kinnitus
- tausta suurus
Taustapilt
Teie vesimärgina kasutatava pildi määratlemiseks kasutate taustpilti. See stiil kasutab lihtsalt saidil oleva pildi laadimiseks failifaili, tõenäoliselt nimega kataloogi pilte.
taustpilt: url (/images/page-background.jpg);
Tähtis on, et pilt ise oleks heledam või läbipaistvam kui tavaline pilt. See loob selle "vesimärk"vaata, milles poolläbipaistev pilt asub veebilehe teksti, graafika ja muude põhielementide taga. Ilma selle sammuta konkureerib taustpilt teie lehel oleva teabega ja muudab selle lugemise raskeks.
Taustapilti saate reguleerida mis tahes redigeerimisprogrammis, näiteks Adobe Photoshop.
Taust-kordus
Järgmine on omadus taust-kordus. Kui soovite, et teie pilt oleks suur vesimärgistiilis graafika, kasutaksite seda omadust, et see pilt kuvataks ainult üks kord.
taust-kordus: ei-kordus;
Ilma ei korda atribuudi järgi on vaikimisi see, et pilti korratakse lehel ikka ja jälle. See on enamikus kaasaegsetes veebilehtede kujundustes ebasoovitav, seega tuleks seda stiili pidada CSS-is hädavajalikuks.
Taust-manus
Taustaga kinnitus on omadus, mille paljud veebidisainerid unustavad. Selle kasutamine hoiab teie taustpildi fikseeritud, kui kasutate fikseeritud vara. See muudab selle pildi lehel fikseeritud vesimärgiks.
Selle atribuudi vaikeväärtus on kerige. Kui te ei määra tausta manuse väärtust, kerib taust koos ülejäänud lehega.
tausta kinnitus: fikseeritud;
Taust-suurus
Taustamõõt on uuem CSS-i vara. See võimaldab teil tausta suuruse määrata selle vaateava põhjal, milles seda vaadatakse. See on väga kasulik tundlikud veebisaidid mida kuvatakse erineva suurusega erinevates seadmetes.
tausta suurus: kate;
Selle vara jaoks saate kasutada kahte kasulikku väärtust:
- Kate - Skaalab tausta nii, et kuvatakse kas täislaius või täiskõrgus. See tähendab, et osa pildi osadest ei pruugi ekraanil ilmuda, kuid kogu ala on kaetud.
- Sisaldama - Skaalib pilti, nii et kogu laius ja kõrgus kuvatakse kujundataval alal. Pilt ei ole ära lõigatud, kuid negatiivne külg on see, et osa ala ei pruugi pildiga kaetud olla.
CSS-i lisamine oma lehele
Pärast ülaltoodud omaduste ja nende väärtuste mõistmist saate need stiilid oma veebisaidile lisada.
Kui teete üheleheküljelist saiti, lisage oma veebilehe HEAD-i järgmised andmed. Lisage see välise stiililehe CSS-stiilidesse, kui loote mitmeleheküljelist saiti ja soovite välise lehe jõudu ära kasutada.
Muutke oma taustpildi URL nii, et see vastaks teie saidi jaoks asjakohasele failinimele ja failiteele. Tehke kõik muud asjakohased muudatused, mis sobivad ka teie kujundusega, ja teil on vesimärk.
Saate määrata ka positsiooni
Kui soovite vesimärgi paigutada oma veebilehe kindlasse kohta, saate ka seda teha. Näiteks võite soovida vesimärki lehe keskele või võib-olla alumisse nurka, erinevalt ülanurgast, mis on vaikimisi.
Selleks lisage oma stiilile atribuut background-position. See asetab pildi täpselt sellesse kohta, kuhu soovite seda ilmuda. Selle positsioneerimise efekti saavutamiseks võite kasutada pikslite väärtusi, protsente või joondusi.
taust-positsioon: keskpunkt;