Z tohto článku sa dozviete, ako zmeniť farbu pozadia webovej stránky, ak upravíte svoj kód HTML.

Kroky

Metóda 1 z 4:

Ako sa pripraviť na úpravu HTML Kód

jeden. Určite farbu pozadia, ktorú chcete použiť. V HTML sú farby nastavené kódmi, ktoré určujú rôzne odtiene. Použite zadarmo online w3schools HTML Color Picker Tool na nájdenie potrieb požadovaných farieb:

Chod na stranu https: // w3schols.Com / farby / colors_picker.Asp Vo webovom prehliadači.
Vyberte základnú farbu, ktorú chcete použiť v časti "Vyberte si farbu".
Vyberte si odtieň na pravej strane stránky.
Zaznamenajte kód, ktorý sa zobrazí vpravo od zvoleného tieňa.

2. Otvorte súbor HTML v textovom editore. Pamätajte, že v atribúte HTML5 Už nie sú podporované. Preto sa nastavujú farbu pozadia a iné nastavenia štýlu stránky pomocou CSS.

Dokument HTML je možné otvoriť v programe Poznámkový blok ++ alebo Poznámkový blok (Windows), ako aj v texteditom alebo BDE (MAC).

3. Pridajte hlavičku HTML do dokumentu. Všetky parametre štýlu stránky, vrátane farby pozadia, musia byť medzi značkami :

4. Vytvorte prázdny reťazec medzi tagmi štýlu. Na tomto riadku, ktorý by mal byť pod značkou A nad tagom , Zadajte potrebné informácie.

6. Pridajte prvok "telo". Medzi tagmi zadajte nasledujúci kód :

Telo {}

Všetko, čo bude uzavreté vo vnútri prvku "Telo" v CSS ovplyvní celú stránku.

Preskočiť tento krok, ak chcete vytvoriť gradientové pozadie.

Metóda 2 z 4:

Ako vytvoriť monofónne pozadie

jeden. Nájdite hlavičku HTML. Malo by byť v hornej časti dokumentu.

2. Pridajte vlastnosť "Farba na pozadí" v prvku "Body". Zadať Farba pozadia: V kučeravých zátvorkách vo vnútri prvku "telo". Nasledujúci kód by sa mal vypnúť:

Telo {pozadia-farba:}

Upozorňujeme, že v tomto kóde je potrebné použiť slovo "farba" a nie "farba".

3. Pridajte požadovanú farbu pozadia na vlastnosť "Color". Vpravo od "Farba pozadia:" Zadajte číselný kód zvolenej farby a potom zadajte bodkočiarku (-). Napríklad, aby sa pozadie stránok ružové, napísali nasledujúci kód:

Telo {pozadia-farba: # d24dff-}

4. Preskúmajte informácie v rámci tagu "štýl". V tomto štádiu by mal hlava vášho dokumentu HTML vyzerať takto:

 {pozadia-farba: # d24dff}

päť. Na nastavenie farby pozadia iných prvkov (hlavičky, odseky a podobne). Napríklad nastavte farbu pozadia hlavnej hlavičky (

) alebo odsek (
) Napíšte nasledujúci kód:

 {pozadia-farba: # 93b874-} h1 {pozadia-farba: # 00B33c-} p {pozadia-farba: #ffffffff) -}Titul
 Na zelenom pozadíOdsek
 na bielom pozadí

Metóda 3 z 4:

Ako vytvoriť gradientové pozadie

jeden. Nájdite hlavičku HTML. Malo by byť v hornej časti dokumentu.

2. Zapamätajte si hlavnú syntax tohto procesu. Ak chcete vytvoriť gradient, musíte poznať dva množstvá: východiskový bod / uhol a množstvo farieb, ktoré sa presunú v inom mieste. Môžete si vybrať niekoľko farieb, aby sa navzájom idú; môžete tiež zadať smer alebo uhol prechodu.

Pozadie: Lineárny gradient (smer / uhol, farba1, farba2, farba3 a tak ďalej)-

3. Vytvorte vertikálny gradient. Ak nešpecifikujete smer, gradient pôjde zhora nadol. Ak chcete vytvoriť takýto gradient, zadajte medzi tagmi nasledujúci kód :

HTML {Min-Výška: 100% -} Body {pozadie: -webkit-lineárny gradient (# 93B874, # c9dcb9) -background: -O-lineárne gradient (# 93B874, # C9DCB9) -Background: -Moz-lineárny -Gradient (# 93B874, # C9DCB9) -Background: Lineárny gradient (# 93B874, # C9DCB9) -background-Farba: # 93B874-}

V rôznych prehliadačoch je funkcia gradientu implementovaná inak, takže musíte pridať viac verzií kódov.

4. Vytvoriť riadený gradient. Ak nechcete, aby gradient mohol ísť vertikálne, zadajte smer prechodu farieb. Ak chcete urobiť, zadajte nasledujúci kód medzi tagami :

HTML {Min-Výška: 100% -} Body {pozadie: -webkit-lineárny gradient (vľavo, # 93B874, # C9DCB9) -background: -O-lineárne gradient (vpravo, # 93B874, # C9DCB9) -Bbackground: -Moz-lineárny gradient (vpravo, # 93B874, # c9dcb9) -Background: lineárny gradient (vpravo, # 93B874, # C9DCB9) -background-Color: # 93B874-}

Ak chcete, zastavte slová "vľavo" (vľavo) a "vpravo" (vpravo) na experimentovanie s rôznymi smermi gradientu.

päť. Na nastavenie gradientu používajte iné vlastnosti. S ním môžete urobiť viac, než sa zdá.

Napríklad po každej farbe môžete zadať číslo v percentách. Takže určíte, ktorý priestor bude zaberať každý farebný segment. Tu je príklad kód s takýmito parametrami:

Pozadie: Lineárny gradient (# 93B874 10%, # C9DCB9 70%, # 000000 90%)-

Pridajte transparentnosť do farby. V tomto prípade bude postupne vyblednúť. Na dosiahnutie efektu útlmu použite rovnakú farbu. Ak chcete nastaviť farbu, budete potrebovať funkciu RGBA (). Táto posledná hodnota určí transparentnosť: 0 - nepriehľadná farba a jeden - transparentná farba.

Pozadie: Lineárny gradient (na pravý, RGBA (147,184,116,0), RGBA (147,184,116,1))-

6. Zobraziť kód. Kód pre vytvorenie gradientu farieb ako na pozadí webovej stránky bude vyzerať takto:

 {Min-Výška: 100% -} Telo {pozadie: -Webkit-lineárne gradient (vľavo, # 93B874, # C9DCB9) -BABKOĽKOSTI: -O-Lineárne gradient (vpravo, # 93B874, # C9DCB9) -Background: - Moz-lineárny gradient (vpravo, # 93B874, # C9DCB9) -BABKOĽKOSTI: LINEAR-GRADENTION (to doprava, # 93B874, # C9DCB9) -background-Color: # 93B874-}

Metóda 4 zo 4:

Ako vytvoriť meniace sa pozadie

jeden. Nájdite hlavičku HTML. Malo by byť v hornej časti dokumentu.

2. Pridajte vlastnosť animácie do prvku "Body". Zadajte nasledujúci kód po "telese {" a na uzatváraciu ortézu:

-WebKit-animácia: Colorchange 60s Infinite-Animácia: Colorchange 60s Infinite-

Horná čiara textu je určená pre prehliadače založené na chrómoch a dolný riadok textu - pre iné prehliadače.

3. Pridajte farby na vlastnosť "Animation". Použite pravidlo "@KEYFRAMES" na nastavenie farieb pozadia, ktoré sa budú meniť cyklicky, ako aj čas, počas ktorého sa každá farba zobrazí na stránke. Nezabudnite zadať iný kód pre rôzne prehliadače. Zadajte nasledujúci kód pod uzatváraciu ortézu prvku tela:

@ Wwebkit-keyframes colorchange {0% {na pozadí: # 33FFFFF3-} 25% {na pozadí: # 78281f-} 50% {pozadie: # 117A65-} 75% {pozadie: # DC7633-} 100% {pozadie: # 9B59B6 -}} @ keyframes colorchange {0% {na pozadí: # 33FFFFF3-} 25% {pozadie: # 78281f-} 50% {pozadie: # 117A65-} 75% {pozadie: # DC7633-} 100% {pozadie: # 9B59B6 -}}

Upozorňujeme, že dve pravidlá (@ Weebkit-keyframes a @KEYFRAMES) Majú rovnaké farby pozadia a záujem. Toto sa vykonáva, aby sa zmenila správne fungovanie pozadia v ľubovoľnom prehliadači.

Záujmu (0%, 25% A tak ďalej) Uveďte podiel času (60 S). Keď je stránka načítaná, jej pozadie bude farba # 33FFF3. Keď 15 ° C (25% zo 60 s), pozadie sa zmení na farbu # 7821f atď.

Zmeniť čas a farbu, aby sa zhodovali s požadovaným výsledkom.

4. Zobraziť kód. Kód pre vytvorenie meniaceho sa pozadia by mal vyzerať takto:

 {-Webkit-animácia: Colorchange 60s Infinite-Animácia: Colorchange 60s Infinite -} @ - Webkit-Keyframes Colorchange {0% {na pozadí: # 33FFFFF3-} 25% {na pozadí: # 78281f-} 50% {2182- t } 75% {na pozadí: # DC7633-} 100% {na pozadí: # 9B59B6 -}} @ Keyframes Colorchange {0% {215-12-11-11-12- } 75% {pozadie: # DC7633-} 100% {pozadie: # 9B59B6-}}

Tipy

Ak chcete použiť hlavné farby v kóde HTML, môžete zadať názvy farieb (bez symbolu #) a nie ich číselné kódy. Ak chcete napríklad vytvoriť oranžové pozadie, zadajte Pozadia-farba: oranžová-.
Ako webová stránka môžete nainštalovať obraz.