Tehke CSS-i abil tehnikat
Kui olete veebisaidi kujundanud, võite olla huvitatud sellest, kuidas luua veebisaidil kindla taustapildi või vesimärgi. See on ühine disainikäitlus, mis on juba mõnda aega populaarne. See on kasulik mõte trikkide veebidisaini kottidele.
Kui te pole seda varem teinud või proovinud varem ilma õnne, võib protsess tunduda hirmutav, kuid see pole tegelikult üldse väga raske. Selle lühikese õpetuse abil saate CSS-i kasutades teavet, mida vajate, et juhtida tehnikat mõne minuti jooksul.
Alustamine
Taustpildid või vesimärgid (mis on tõesti väga kerged taustpildid) on ajaloo trükitud kujundusega. Dokumentidega on pikka aega lisatud vesemärgid, mis takistavad nende kopeerimist. Peale selle kasutavad paljud flaierid ja brošüürid trükitud kujunduse osana suuri taustapilte. Veebi disain on pika laenatud stiili trükistest ja taustpildistest üks neist laenatud stiilidest.
Neid suuri taustapilte on lihtne luua järgmiste kolme CSS-stiili omadustega:
- taustapilt
- tausta korrata
- tausta-kinnitus
- tausta suurus
Taustapilt
Kasutage taustpildi, et määratleda pilt, mida kasutatakse vesimärgina. See stiil lihtsalt kasutab teie saidil oleva pildi laadimiseks failirada, tõenäoliselt kataloogis nimega "pilte".
taust-pilt: url (/images/page-background.jpg);
On oluline, et pilt oleks ise tavalisest pildist lähemal või läbipaistvam. See loob selle, et "vesimärk" näeks välja pool läbipaistva pildi, mis jääb teksti, graafika ja muude veebilehe põhielementide taha. Ilma selle sammuta konkureerib taustakujutis teie lehel oleva teabega ja raskendab seda lugeda.
Saate reguleerida taustapilti mis tahes redigeerimisprogrammis, näiteks Adobe Photoshopis.
Taust-korrata
Taust-korduv omadus on järgmine. Kui soovite, et teie pilt oleks suur vesimärk-stiilis graafika, kasutaksite seda omadust, et see pilt kuvataks ainult üks kord.
taust-korrata: no-repeat;
Ilma reegli "no-repeat" puudumisel on vaikimisi see, et pilt kordub lehel uuesti ja uuesti. See on enamikes veebisaitide kujundustes ebasoovitav, nii et see stiil peaks teie CSSis olema oluline.
Tausta lisamine
Taustarakendus on vara, mida paljud veebidisainerid unustavad. Kasutades seda, hoiab teie taustpildi korral fikseeritud vara kasutamisel fikseeritud. See muudab selle pildi leheküljel fikseeritud vesimärgiks.
Selle vara vaikeväärtus on "sirvimine". Kui te ei määra tausta-manuse väärtust, liigitatakse taust koos ülejäänud lehega.
tausta-kinnitus: fikseeritud;
Tausta suurus
Taustade suurus on uuem CSS-i vara. See võimaldab määrata tausta suuruse vaatluspordist, mida see vaadatakse. See on väga kasulik tundlikele veebisaitidele , mis kuvatakse erinevatel suurustel erinevates seadmetes .
tausta suurus: kate;
Selle vara jaoks saate kasutada kahte kasulikku väärtust:
- Kaanel - Taustaheitmisel kuvatakse kas täislaius või täis kõrgus. See tähendab, et mõned pildi osad ei pruugi ekraanil ilmuda, kuid kogu ala kaetakse.
- Contain - Suurendab kujutist, nii et kogu laius ja kõrgus on näidatud stiilis alal. Pilt ei ole katkenud, kuid negatiivne külg on see, et pildi poolest ei pruugi olla osa alaosast.
CSS-i lisamine teie lehele
Kui olete mõelnud ülaltoodud omadused ja nende väärtused, saate need stiilid oma veebisaidile lisada.
Kui teete ühe lehe saidi, lisage oma veebilehe HEAD-le järgmine märge. Lisage see välise stiililehe CSS-i stiilidesse, kui ehitate mitme lehe saiti ja soovite kasutada välise lehe võimsust.