Vykonajte techniku pomocou CSS
Ak navrhujete webové stránky, možno by vás zaujímalo, ako vytvoriť pevný obrázok na pozadí alebo vodoznak na webovej stránke. Ide o bežnú dizajnovú liečbu, ktorá je už dlhší čas populárna. Je to šikovný efekt, ktorý má vo vašom webovom dizajne tašku trikov.
Ak ste to neurobili predtým, alebo ste to predtým skúšali bez šťastia, proces sa môže zdať zastrašujúci, ale v skutočnosti nie je vôbec ťažké. S týmto krátkym tutoriálom získate informácie, ktoré potrebujete na zvládnutie techniky v priebehu niekoľkých minút pomocou CSS.
Začíname
Obrázky na pozadí alebo vodoznaky (ktoré sú naozaj veľmi ľahké obrázky na pozadí) majú históriu v tlačenej podobe. Dokumenty už dlho obsahujú vodoznaky, aby sa zabránilo ich kopírovaniu. Navyše veľa letákov a brožúr používa veľké obrázky na pozadí ako súčasť návrhu pre vytlačený kus. Web dizajn má dlho vypožičané štýly z tlače a obrázky na pozadí sú jedným z týchto vypožičaných štýlov.
Tieto veľké obrázky na pozadí sa dajú ľahko vytvoriť pomocou nasledujúcich troch vlastností štýlu CSS :
- background-image
- background-repeat
- background-attachment
- background-size
Background-Image
Na definovanie obrázka, ktorý sa bude používať ako vodoznak, použijete obrázok na pozadí. Tento štýl jednoducho používa cestu k súboru na načítanie obrázka, ktorý máte na vašom webe, pravdepodobne v adresári s názvom "obrázky".
obrázok-pozadie: url (/images/page-background.jpg);
Je dôležité, aby bol obraz sám o sebe svetlejší alebo transparentnejší ako normálny obraz. Vytvorí to vzhľad "vodoznaku", v ktorom sa za textom, grafikou a ďalšími hlavnými prvkami webovej stránky nachádza polopriehľadný obraz. Bez tohto kroku bude obrázok na pozadí konkurovať informáciám na vašej stránke a bude ťažké čítať.
Obrázok pozadia môžete upraviť v ľubovoľnom editovacom programe, ako je napríklad program Adobe Photoshop.
Background-repeat
Vlastnosť opakovania pozadia prichádza ďalej. Ak chcete, aby bol váš obrázok veľkou grafikou v podobe vodoznaku, použite túto vlastnosť, aby sa obrázok zobrazil iba raz.
opakovanie pozadia: opakovanie;
Bez vlastností bez opakovania je predvolenou možnosť, že sa obrázok na stránke opakuje znova a znova. Toto je nežiaduce vo väčšine návrhov modernej webovej stránky, takže tento štýl by sa mal považovať za nevyhnutný vo vašom CSS.
Background-attachment
Pozadie-pripojenie je vlastnosť, že mnoho web dizajnérov zabudnúť. Použitie zachováva obrázok na pozadí, keď použijete vlastnosť "fix". To je to, čo zmení tento obrázok na vodoznak, ktorý je pevne na stránke.
Predvolenou hodnotou pre túto vlastnosť je "posúvanie". Ak nezadáte hodnotu priloženého pozadia, pozadie sa bude pohybovať spolu so zvyškom stránky.
pripojenie na pozadí: opravené;
Background-Size
Veľkosť pozadia je novšia vlastnosť CSS. Umožňuje vám nastaviť veľkosť pozadia na základe výrezu, na ktorom sa zobrazuje. Toto je veľmi užitočné pre citlivé webové stránky, ktoré sa budú zobrazovať v rôznych veľkostiach na rôznych zariadeniach .
veľkosť pozadia: obal;
Dve užitočné hodnoty, ktoré môžete použiť pre túto vlastnosť zahŕňajú:
- Kryt - Zmerá pozadie tak, aby sa zobrazila buď celá alebo celá výška. To znamená, že niektoré časti obrazu sa nemusia objaviť na obrazovke, ale celá oblasť bude pokrytá.
- Obsah - Zmení obraz tak, aby sa v štylizovanej oblasti zobrazila celá šírka a výška. Obraz nie je odrezaný, ale nevýhodou je, že časti oblasti nemusia byť pokryté obrazom.
Pridanie CSS na vašu stránku
Po pochopení uvedených vlastností a ich hodnôt môžete tieto štýly pridať na svoje webové stránky.
Pridajte nasledujúce informácie do stránky HEAD vašej webovej stránky, ak vytvárate stránku s jedinou stránkou. Pridajte ho do štýlov CSS externého štýlu, ak vytvárate viacstránkový web a chcete využiť výkon externého listu.