Skapa ett bländande övertoning som när färgerna växlar från mörker till ljus i stigande eller fallande ordning på din webbplats bakgrund , kan vara ganska iögonfallande effekt . Beroende på innehållet kan färgprakt öka kraftigt texter eller bilder på sidan , eller uppmärksamma särskilt uppgifter . Det finns några sätt att programmera denna effekt , kräver bara några enkla bitar av HTML-kod och övergripande formatmallar ( CSS ) . Saker du behöver
grafikprogram
text editor program
Visa fler instruktioner
Enkel HTML Format
1
Öppna din favorit grafikprogram , t.ex. Gimp , Photoshop eller Paintshop och skapa en ny bild som är 5 pixlar hög och 760 pixlar tvärs med en 800 - pixel upplösning . För en 1024 - pixlars upplösning , gör bilden 984 pixlar bred , i stället .
2
Välj Fill verktyget och gradient effekt , och välja två färger , en från startpunkten av lutning , och den andra till slutpunkten .
3
Spara den här filen i en JPG-format i din webbplats image katalog på nätet och lägg till följande i särskilda sidans HTML-kod , där
, avsnitt börjar :
Substitute " name.jpg " för din fil . Din webbsida kommer nu att visa en tonad bakgrund .
Använda Cascading Style Sheets i HTML
4
Skapa ett CSS eller CSS metod för en tonad bakgrund för din webbsida sida genom att först göra en gradient bild som i föregående exempel , men den här gången göra bilden en bildpunkt bred och 800 bildpunkter högt. Standarden för visning på de flesta skärmar är 800 pixlar . Spara bilden som en JPG till webbplatsens image katalog .
5
Öppna och skanna igenom din CSS- kod med hjälp av din favorit texteditor . Filen kommer att ligga i din webbplats katalog med ändelsen " . Css " . Lägg till följande kod i din CSS stomsektionen :
body { background: url ( bilder /name.jpg ) 0 % 0 % repeat - x ; color : # 000000 ; höjd : 800px ; padding : 5px ; }
" bakgrund : " uttalande innehåller bildfilen och sökväg , och " repeat - x " och " 0 % 0 % " säger webbläsaren utgångsläget för bilden på xy axel , i det här fallet på 0,0 , eller vid det översta , vänstra punkten av skärmen , och därefter upprepa bilden längs x - axeln , eller tvärs över sidan .
6
Kontrollera om din bild är kortare än skärmen när du bläddrar ner på sidan . Om så är fallet , måste du lägga till en bakgrundsfärg till " bakgrunden " deklaration i din CSS- kod som stämmer botten av bilden . Detta sätt, om gradienten tar slut kommer bakgrunden så att dess nedre av gradienten
Exempelvis om botten av gradienten bilden är svart , skulle koden vara följande: .
body { background: # 000000 url ( bilder /name.jpg ) 0 % 0 % repeat - x ; color : # 000000 ; höjd : 800px ; padding : 5px }
" # 000000 " är den hexadecimal tolkning för färgen svart . Den " bakgrund " i detta uttalande kommer att åsidosätta URL kommandot . Så , om bilden är för kort , kommer bakgrunden där bilden slutar vara svart .
Du kan hitta hexadecimal kod för din färg genom att öppna din bild i din grafiska program , och välja pipettverktyget och pekar till botten uppsättning bildpunkter. När du väljer färg och markera den i dina verktyg , kan du hitta koden .
