Z tohoto článku se naučíte změnit barvu pozadí webové stránky, pokud upravíte svůj kód HTML.

Kroky

Metoda 1 z 4:

Jak se připravit na úpravy kódu HTML

jeden. Určete barvu pozadí, kterou chcete použít. V HTML, barvy jsou nastaveny kódy, které určují různé odstíny. Použijte volné online W3SCHOOLS HTML Color Color Picker, abyste našli potřeby požadovaných barev:

Jdi na stránku https: // W3SCHOOLS.Com / barvy / colors_picker.Asp Ve webovém prohlížeči.
Vyberte základní barvu, kterou chcete použít v části "Vyberte barvu".
Vyberte si stín na pravé straně stránky.
Zaznamenejte kód, který se zobrazí vpravo od vybraného odstínu.

2. Otevřete soubor HTML v textovém editoru. Nezapomeňte, že v atributu HTML5 Již nepodporuje. Barva pozadí a další nastavení stylu stránky jsou proto nastaveny pomocí CSS.

Dokument HTML lze otevřít v programu Poznámkový blok ++ nebo Poznámkový blok (Windows), stejně jako v TextEdit nebo BBedit (Mac).

3. Přidejte html záhlaví do dokumentu. Všechny parametry stylu stránky, včetně barvy pozadí, musí být mezi značkami :

4. Vytvořte prázdný řetězec mezi značkami ve stylu. Na tomto řádku, který by měl být pod značkou A přes značku , Zadáte potřebné informace.

6. Přidat prvek "tělo". Zadejte následující kód mezi značkami :

Tělo {}

Vše, co bude uzavřeno uvnitř prvku "tělo" v CSS ovlivní celou stránku.

Přeskočte tento krok, chcete-li vytvořit gradient pozadí.

Metoda 2 ze 4:

Jak vytvořit monofonní pozadí

jeden. Najděte hlavičku HTML. Mělo by být v horní části dokumentu.

2. Přidat do vlastnosti "Background-Color" v prvku "Tělo". Enter Barva pozadí: V kudrnatých závorkách uvnitř prvku "tělo". Následující kód by se měl ukázat:

Tělo {background-color:}

Vezměte prosím na vědomí, že v tomto kódu je nutné použít slovo "Color", a ne "Color".

3. Přidejte požadované barvy pozadí na vlastnost "Background-Color". Vpravo od "Barva pozadí" Zadejte numerický kód vybrané barvy a zadejte středník (-). Chcete-li například vytvořit pozadí stránky Pink, napište následující kód:

Tělo {background-color: # d24dff-}

4. Zkontrolujte informace v rámci značky "Style". V této fázi by měl vypadat hlavička vašeho dokumentu HTML takto:

 {background-color: # d24dff}

Pět. Použijte "background-color" pro nastavení barvy pozadí jiných prvků (záhlaví, odstavce a podobně). Chcete-li například nastavit barvu pozadí hlavního záhlaví (

nebo odstavec (
), napsat následující kód:

 {background-color: # 93B874-} h1 {background-color: # 00b33c-} p {background-color: #ffffff) -}Titul
 Na zeleném pozadíOdstavec
 Na bílém pozadí

Metoda 3 ze 4:

Jak vytvořit pozadí přechodu

jeden. Najděte hlavičku HTML. Mělo by být v horní části dokumentu.

2. Zapamatujte si hlavní syntaxi tohoto procesu. Chcete-li vytvořit gradient, musíte znát dvě množství: výchozí bod / úhel a počet barev, které se budou pohybovat v jiném. Můžete si vybrat několik barev tak, aby šli k sobě; můžete také zadat směr nebo úhel přechodu.

Pozadí: lineární gradient (směr / úhel, barva1, barva2, barva3 a tak dále)-

3. Vytvořit vertikální gradient. Pokud nezadáte směr, gradient půjde shora dolů. Chcete-li vytvořit takový gradient, zadejte mezi značkami následující kód :

Html {min-výška: 100% -} tělo {pozadí: -webkit-lineární gradient (# 93b874, # c9dcb9) -Background: -O-lineární gradient (# 93B874, # c9dcb9) -padground: -Moz-lineární -Crady (# 93B874, # C9DCB9) -Background: lineární gradient (# 93B874, # C9DCB9) -Bazeta-barva: # 93B874-}

V různých prohlížečích je funkce gradientu implementována jinak, takže je třeba přidat více verzí kódů.

4. Vytvořit řízený gradient. Pokud nechcete gradient jít svisle, zadejte směr přechodu barev. Chcete-li to provést, zadejte následující kód mezi značkami :

Html {min-výška: 100% -} tělo {background: -webkit-lineární gradient (vlevo, # 93b874, # c9dcb9) -background gradient (vpravo, # 93b874 gradient (vpravo # 93b874, # c9dcb9) -background: -Moz-lineární gradient (vpravo # 93b874, # c9dcb9) -Background: lineární gradient (vpravo, # 93b874, # c9dcb9) -background-color: # 93b874-}

Pokud chcete, zastavte slova "vlevo" (vlevo) a "vpravo" (vpravo) do experimentu s různými směry gradientu.

Pět. Pro nastavení gradientu použijte jiné vlastnosti. S ním můžete udělat víc, než se zdá.

Například po každé barvě můžete zadat číslo v procentech. Takže určíte, který prostor zabírá každý barevný segment. Zde je příkladový kód s takovými parametry:

Pozadí: lineární gradient (# 93B874 10%, # C9DCB9 70%, # 000000 90%)-

Přidat průhlednost k barvě. V tomto případě bude postupně vyblednout. Pro dosažení účinku útlumu použijte stejnou barvu. Chcete-li nastavit barvu, budete potřebovat funkci RGBA (). Transparentnost stanoví tato hodnota: 0 - neprůhledná barva a jeden - transparentní barva.

Pozadí: lineární gradient (vpravo, RGBA (147,184,116,0), RGBA (147,184,116,1))-

6. Zobrazit kód. Kód pro vytvoření barevného gradientu jako pozadí webové stránky bude vypadat něco takového:

 {min-výška: 100% -} tělo {pozadí: -webkit-lineární gradient (vlevo, # 93b874, # c9dcb9) -background gradientu (vpravo): - MOZ-lineární gradient (vpravo # 93b874, # C9DCB9) -Background: lineární gradient (doprava, # 93b874, # c9dcb9) -background-color: # 93b874-}

Metoda 4 ze 4:

Jak vytvořit měnící se pozadí

jeden. Najděte hlavičku HTML. Mělo by být v horní části dokumentu.

2. Přidejte vlastnost animace na prvek "tělo". Zadejte následující kód po "karoserii {" a na závěrečnou vazbu:

-WebKit-animace: ColorChange 60S Infinite-animace: ColorChange 60s Infinite-

Horní řádek textu je určen pro prohlížeče na bázi chromu a spodní řádek textu - pro jiné prohlížeče.

3. Přidat barvy na vlastnost "animace". Použijte pravidlo "@KeyFrames" pro nastavení barev pozadí, které se změní cyklicky, stejně jako čas, během kterých se zobrazí každá barva na stránce. Nezapomeňte zadat jiný kód pro různé prohlížeče. Pod zavíráním prvku těla zadejte následující kód:

@ Webkit-keyframes colorchange {0% {pozadí: # 33ffff3-} 25% {pozadí: # 78281f-} 50% {pozadí: # 117A65-} 75% {pozadí: # DC7633-} 100% {pozadí: # 9B59b6 -}} @ keyframes colorchange {0% {pozadí: # 33ffff3-} 25% {pozadí: # 78281f-} 50% {pozadí: # 117A65-} 75% {pozadí: # DC7633-} 100% {pozadí: # 9B59b6 -}}

Upozorňujeme, že dvě pravidla (@ -Webkit-keyframes a @Keyframes) mají stejné barvy pozadí a zájem. To se provádí v pořadí pro změnu pozadí správně pracoval v libovolném prohlížeči.

Zájem (0%, 25% A tak dále) uveďte podíl času (60 S). Když je stránka načtena, bude jeho pozadí barva # 33fff3. Když se 15 ° C (25% 60 s), bude pozadí změněno na barvu # 7821f atd.

Změnit čas a barvu tak, aby odpovídaly požadovanému výsledku.

4. Zobrazit kód. Kód pro vytvoření změny pozadí by měl vypadat takto:

 {-WebKit-animace: ColorChange 60S Infinite-animace: Colorchange 60S Infinite -} @ - Webkit-keyframes ColorChange {0% {pozadí: # 33ffff3-} 25% {pozadí: # 78281f-} 50% {} 50% {pozadí: # 117A65- } 75% {pozadí: # DC7633-} 100% {pozadí: # 9B59b6 -}} @ keyframes colorchange {0% {pozadí: # 33fff3-} 25% {pozadí: # 78281f-} 50% {background: # 117A65- } 75% {pozadí: # DC7633-} 100% {pozadí: # 9B59B6-}}

Tipy

Pokud chcete používat hlavní barvy v kódu HTML, můžete zadat názvy barev (bez symbolů #), a ne jejich číselné kódy. Chcete-li vytvořit oranžové pozadí, zadejte Barva pozadí: oranžová-.
Jako webová stránka můžete nainstalovat obraz.

Varování

Před publikováním zkontrolujte změny provedené na webovém kódu.

Kroky

nebo odstavec (), napsat následující kód:

Titul

Tipy

Varování

nebo odstavec (
), napsat následující kód: