Ebből a cikkből megtudhatja, hogyan változtathatja meg a weboldal hátterét, ha módosítja a HTML kódját.

Lépések

1. módszer a 4-ből:

Hogyan kell felkészülni a HTML kód szerkesztésére

egy. Határozza meg a használni kívánt háttérszínt. A HTML-ben a színeket a különböző árnyalatokat meghatározó kódokkal állítják be. Használja az ingyenes online W3schools HTML COLOR Picker eszközt, hogy megtalálja a kívánt színek igényeit:

Menj az oldalra https: // w3schools.Com / colors / colors_picker.ÁSPISKÍGYÓ Egy webböngészőben.
Válassza ki a használni kívánt alapszínt a "Színes" szakaszban.
Válasszon egy árnyékot az oldal jobb oldalán.
Jegyezze fel a kiválasztott árnyalat jobb oldalán megjelenő kódot.

2. Nyisson meg egy HTML fájlt egy szövegszerkesztőben. Ne feledje, hogy a html5 attribútumban Már nem támogatott. Ezért a háttérszín és más oldalstílus beállításokat a CSS segítségével állítják be.

A HTML-dokumentumot a Notepad ++ vagy a Notepad (Windows), valamint a Textedit vagy a Bbedit (Mac) megnyitása lehet megnyitni.

3. Adja hozzá a HTML fejlécet a dokumentumhoz. Minden oldal stílusparaméter, beleértve a háttér színét, a címkék között kell lennie :

4. Hozzon létre egy üres karakterláncot a stíluscímkék között. Ezen a sorban, amely a címke alatt kell lennie És a címke felett , Meg fogja adni a szükséges információkat.

6. Adjon hozzá egy "test" elemet. Adja meg a következő kódot a címkék között :

Test {}

Minden, ami a CSS "test" elemén belül lezárul, befolyásolja az egész oldalt.

Ugrás erre a lépcsőre, ha gradiens háttér létrehozása.

2. módszer a 4-ből:

Hogyan hozzunk létre egy monofonikus hátteret

egy. Keresse meg a HTML fejlécet. A dokumentum tetején kell lennie.

2. Add ingatlan "háttér szín" a "test" elemben. Belép Háttérszín: A göndör zárójelben az elem "test". A következő kódnak ki kell kapcsolnia:

Test {háttér szín:}

Kérjük, vegye figyelembe, hogy ebben a kódban a "szín" szót kell használni, és nem "szín".

3. Adja hozzá a kívánt háttérszínt a "Background-Color" tulajdonsághoz. A "háttérszín" jobb oldalán írja be a kiválasztott szín numerikus kódját, majd írja be a pontosvolont (-). Például, hogy az oldalak hátterét rózsaszín, írja be a következő kódot:

Test {háttér szín: # d24dff-}

4. Tekintse át a "Stílus" címkein belüli információkat. Ebben a szakaszban a HTML-dokumentum fejlécének így kell kinéznie:

 {háttérszín: # d24dff}

öt. Használja a "Background-Color" -t a többi elem háttérszínének beállításához (fejlécek, bekezdések és hasonlók). Például a fő fejléc háttérszínének beállításához (

) vagy bekezdés (
), írja be a következő kódot:

 {háttérszín: # 93b874-} H1 {háttér szín: # 00b33c-} p {háttér szín: #FFFFFF) -}Cím
 Zöld háttérenBekezdés
 fehér alapon

3. módszer a 4-ből:

Hogyan hozzunk létre gradiens háttér

egy. Keresse meg a HTML fejlécet. A dokumentum tetején kell lennie.

2. Ne feledje, hogy a folyamat fő szintaxisa. A gradiens létrehozásához két mennyiséget kell tudnia: a kiindulási pont / szög és számos szín, amely egy másikba mozog. Kiválaszthat néhány színt úgy, hogy egymáshoz mennek; megadhatja az irányt vagy az átmeneti szöget is.

Háttér: lineáris gradiens (irány / szög, color1, color2, color3 és így tovább)-

3. Hozzon létre egy függőleges gradiens. Ha nem adja meg az irányt, a gradiens felülről lefelé halad. Egy ilyen gradiens létrehozásához adja meg a következő kódot a címkék között :

HTML {MIN-Magasság: 100% -} test {háttér: -webkit-lineáris gradiens (# 93b874, # C9DCB9) -Background: -O-lineáris gradiens (# 93b874, # C9DCB9) -Gradient (# 93B874, # C9DCB9) -background: lineáris-gradiens (# 93B874, # C9DCB9) -background-Szín: # 93B874-}

Különböző böngészőkben a gradiens funkció eltérő módon valósul meg, így több kódváltozatot kell hozzáadnia.

4. Hozzon létre egy irányított gradienst. Ha nem szeretné, hogy a gradiens függőlegesen menjen, adja meg a színek átmenet irányát. Ehhez adja meg a következő kódot a címkék között :

HTML {min-magasság: 100% -} body {background: -Webkit-lineáris-gradiens (bal, # 93b874, # C9DCB9) -background: -o-lineáris-gradiens (jobb, # 93b874, # C9DCB9) -background: -Moz-lineáris gradiens (jobb, # 93b874, # C9DCB9) -Background: lineáris-gradiens (jobbra, # 93b874, # C9DCB9) -Background-color: # 93b874-

Ha szeretné, állítsa le a "balra" (balra) és a "jobbra" (jobbra) szavakat, hogy kísérletezzen a gradiens különböző irányaival.

öt. Használjon más tulajdonságokat a gradiens beállításához. Vele többet tehetsz, mint amilyennek látszik.

Például minden egyes szín után százalékos számot adhat meg. Így megadja, hogy melyik helyet foglalja el az egyes színes szegmenst. Itt van egy példa kód, ilyen paraméterekkel:

Háttér: lineáris-gradiens (# 93b874 10%, # C9DCB9 70%, # 000000 90%)-

Adjon hozzá átlátszó színt. Ebben az esetben fokozatosan elhalványul. A csillapítási hatás elérése érdekében használja az azonos színt. A szín beállítása, akkor szükség van egy funkcióra RGBA (). Az utóbbi érték meghatározza az átláthatóságot: 0 - átlátszatlan szín és egy - átlátszó szín.

Háttér: lineáris gradiens (jobbra, RGBA (147,184,116,0), RGBA (147,184,116,1)))))-

6. A kód megtekintése. A színes gradiens létrehozásának kódja, mint weboldal háttérként úgy néz ki, mint ez:

 {min-magasság: 100% -} test {háttér: webkit-lineáris gradiens (bal, # 93b874, # C9DCB9) -Background: -o-lineáris gradiens (jobb, # 93b874, # C9DCB9) -Background: Moz-lineáris gradiens (jobb, # 93b874, # C9DCB9) -Background: lineáris-gradiens (jobbra, # 93b874, # C9DCB9) -Background-color: # 93b874-

4. módszer 4:

Hogyan lehet létrehozni egy változó hátteret

egy. Keresse meg a HTML fejlécet. A dokumentum tetején kell lennie.

2. Adja hozzá az animációs tulajdonságot a "test" elemhez. Adja meg a következő kódot a "Body {" és a záró brace után:

-Webkit-Animáció: ColorChange 60s Infinite-Animáció: ColorChange 60s Infinite-

A szöveg felső sora króm-alapú böngészőkre és a szöveg alsó vonalára tervezték - más böngészők számára.

3. Színek hozzáadása az "animáció" tulajdonsághoz. Használja a "@keyframes" szabályt, hogy állítsa be a ciklikusan megváltozó háttérszíneit, valamint azt az időt, amikor az egyes színek megjelennek az oldalon. Ne felejtsen el egy másik kódot adni a különböző böngészők számára. Adja meg a következő kódot a testelem záróblokkja alatt:

@ -Webkit-keyframes colorchange {0% {háttér: # 33ffff3-} 25% {háttér: # 78281f-} 50% {háttér: # 117a65-} 75% {háttér: # DC7633-} 100% {háttér: # 9b59b6 -}} @ KeyFrames colorchange {0% {háttér: # 33ffff3-} 25% {háttér: # 78281f-} 50% {háttér: # 117a65-} 75% {háttér: # DC7633-} 100% {háttér: # 9b59b6 -}}

Kérjük, vegye figyelembe, hogy két szabály (@ -Webkit-kulcskeretek és @Keyframes) ugyanolyan színekkel és érdeklődéssel rendelkeznek. Ez történik annak érdekében, hogy a háttér helyesen működjön bármely böngészőben.

Érdeklődés (0%, 25% És így tovább) jelzik az idő részesedését (60 S). Ha az oldal betöltődik, a háttere színe lesz # 33FFF3. Ha 15 ° C (25% -a 60%), a háttér színre változik # 7821F stb.

Állítsa be az időt és a színt, hogy megfeleljen a kívánt eredménynek.

4. A kód megtekintése. A változó háttér létrehozásának kódja így kell kinéznie:

 {-Webkit-animáció: ColorChange 60s Infinite-Animáció: ColorChange 60s Infinite -} @ - Webkit-KeyFrames colorchange {0% {háttér: # 33FFFFF3-} 25% {háttér: # 78281f-} 50% {háttér: # 117a65- } 75% {háttér: # DC7633-} 100% {háttér: # 9B59B6 -}}}} @ KeyFrames colorchange {0% {háttér: # 33FFF3-} 25% {háttér: # 78281F-} 50% {háttér: # 117a65- } 75% {háttér: # dc7633-} 100% {háttér: # 9b59b6-}}}}

Tippek

Ha a HTML-kód fő színeit szeretné használni, megadhatja a színek nevét (szimbólum nélkül), és nem a numerikus kódjaikat. Például, narancssárga háttér létrehozásához írja be Háttérszín: narancssárga-.
Weboldalként telepíthető kép.