Ako si vyrobiť výplň pozadia v HTML

Vytvorenie oslňujúci výplň prechodom , ako keď sa striedajú farby od tmavej k svetlu vo vzostupnom alebo zostupnom poradí na vašich webových stránkach na pozadí , môže byť docela pútavý efekt . V závislosti na obsahu , môže zobrazenie farieb výrazne zvýšiť texty alebo obrázky na stránke , alebo upozorniť na konkrétne informácie . Existuje niekoľko spôsobov , ako naprogramovať tento efekt , vyžadujúce len niekoľko jednoduchých kúskov kódu HTML a kaskádových štýlov ( CSS ) . Veci , ktoré budete potrebovať
programu Graphics
Textový editor programu
Zobraziť ďalšie inštrukcie
Simple HTML formáte
1

Otvorte svoj ​​obľúbený grafický program , ako je Gimp , Photoshop , alebo Lakovňa a vytvoriť nový obrázok , ktorý je 5 pixelov na výšku a 760 pixelov na celom pomocou rozlíšenie je 800 pixelov . Pre rozlíšenie 1024 pixelov , aby obrázok 984 pixelov široký , namiesto toho .
2

Vyberte nástroj Výplň a efekt prechodu a vyberte si dve farby , jedna z počiatočného bodu prechodu , a druhý koncový bod .
3

Tento súbor uložiť vo formáte JPG na svoje webové stránky v adresári obrázkov on - line a pridajte nasledujúce konkrétneho kódu HTML stránky , kde , časť začína :

Substitute " name.jpg " pre vášho súboru . Vaša webová stránka teraz zobrazí gradient pozadia .
Používanie kaskádových štýlov v HTML
4

Vytvorenie šablóny štýlov CSS alebo metódu na gradient pozadí pre váš web strana tým , že najprv robiť s prechodom obraz ako v predchádzajúcom príklade , ale tentoraz robiť obrázok 1 pixel široký a 800 pixelov vysoký . Štandard pre prezeranie na väčšine obrazoviek je 800 pixelov . Uložte obrázok ako JPG na vašich webových stránkach v adresári obrázkov .
5

Otvoriť a skenovanie cez CSS kódu pomocou vášho obľúbeného textového editora . Súbor bude umiestnený na svoje webové stránky adresári s príponou " . Css " . Pridajte nasledujúci kód do vášho tela CSS sekcii :

tela { background : url ( images /name.jpg ) 0 % 0 % repeat - x ; color : # 000000 ; výška : 800px ; padding : 5px ; }

"background : " Výkaz obsahuje súbor s obrázkom a cestu a " opakovať - x " a " 0 % 0 % " sa hovorí prehliadač východisková pozícia obrazu na xy os, v tomto prípade na 0,0 , alebo na najvyššiu , najviac vľavo bod na obrazovke , a potom opakovať obrazu pozdĺž osi x , alebo cez stránku .
6

Skontrolujte , či disk je kratšia ako na obrazovke , keď môžete posunúť stránku dole . Ak áno , budete musieť pridať farbu pozadia na " pozadí " vyhlásenie vo vašom CSS kódu , ktorý zodpovedá spodnej časti obrazu . Týmto spôsobom , v prípade , že sklon vyčerpá , pozadie bude zodpovedať spodnej prechodu celým

Napríklad , v prípade , že spodná časť gradientu obrazu je čierna , kód vyzerať nasledovne : .
< P > body { background : # 000000 url ( images /name.jpg ) 0 % 0 % repeat - x ; color : # 000000 ; výška : 800px ; padding : 5px }

" # 000000 " je hexadecimálne výklad pre čiernu farbu . " Pozadie " v tomto vyhlásení prepíše príkaz URL . Takže , ak je obraz príliš krátky , pozadia , kde sa obraz konca bude čierna .

Môžete nájsť hexadecimálnom kóde pre svoju farbu otvorením disk v grafickom programe , a výberom kvapkadlo nástroj a ukázal do spodnej sady pixelov . Akonáhle si vyberiete farbu a vyberte ho vo svojich nástrojoch , môžete nájsť kód .

• Predchádzajúca strana: Aplikácia lineárneho programovania vo Computers 
• Ďalšia strana: Ako čítať znak z klávesnice na zhromaždení