Uit dit artikel leert u hoe u de kleur van de webpagina-achtergrond kunt wijzigen, als u zijn HTML-code bewerkt.

Stappen

Methode 1 van 4:

Hoe u zich voor te bereiden op het bewerken van HTML-code

een. Bepaal de achtergrondkleur die u wilt gebruiken. In HTML worden kleuren ingesteld door codes die verschillende tinten bepalen. Gebruik de GRATIS ONLINE W3SCHOOLS HTML Color Picker-tool om de behoeften van de gewenste kleuren te vinden:

Ga naar pagina HTTPS: // W3schools.Com / kleuren / kleuren_picken.ADDER In een webbrowser.
Selecteer de basiskleur die u wilt gebruiken in het gedeelte "Pick a color".
Kies een schaduw aan de rechterkant van de pagina.
Neem de code op die rechts van de geselecteerde schaduw wordt weergegeven.

2. Open een HTML-bestand in een teksteditor. Onthoud dat in HTML5-kenmerk Niet langer gesteund. Daarom worden de achtergrondkleur en andere pagina-stijl instellen met CSS.

HTML-document kan worden geopend in Kladblok ++ of Kladblok (Windows), evenals in TextTEIT of BBEDIT (MAC).

3. Voeg de HTML-koptekst toe aan het document. Alle parameters van de paginastijl, inclusief de kleur van de achtergrond, moeten tussen de tags zijn :

4. Maak een lege tekenreeks tussen stijltags. Op deze regel, die onder de tag moet staan En over de tag , U voert de nodige informatie in.

6. Voeg een element "lichaam" toe. Voer de volgende code tussen tags in :

LICHAAM {}

Het enige dat in het "lichaam" -element in CSS zal worden afgesloten, beïnvloedt de volledige pagina.

Sla deze stap over als je een gradiëntachtergrond wilt maken.

Methode 2 van 4:

Hoe een monofonische achtergrond te creëren

een. Zoek de HTML-header. Het moet bovenaan het document staan.

2. Voeg onroerend goed "achtergrondkleur" in het "lichaam" -element toe. Binnenkomen Achtergrond kleur: In krullende beugels in het element "lichaam". De volgende code moet blijken:

Lichaam {background-color:}

Houd er rekening mee dat het in deze code nodig is om het woord "kleur" en niet "kleur" te gebruiken.

3. Voeg de gewenste achtergrondkleur toe aan de eigenschap "achtergrondkleur". Rechts van "Achtergrondkleur:" Voer de numerieke code van de geselecteerde kleur in en voer vervolgens de puntkomma (-) in. Bijvoorbeeld om de achtergrond van de pagina`s roze te maken, schrijf dan de volgende code:

Lichaam {achtergrond-color: # D24DFF-}

4. Bekijk de informatie binnen de tag "Style". In dit stadium moet de kop van uw HTML-document er als volgt uitzien:

 {Achtergrondkleur: # D24DFF}

vijf. Gebruik "achtergrondkleur" om de achtergrondkleur van andere elementen in te stellen (headers, alinea`s en dergelijke). Om de achtergrondkleur van de hoofdkop bijvoorbeeld (

) of paragraaf (
), schrijf de volgende code:

 {background-color: # 93b874-} H1 {background-color: # 00b33c-} p {background-color: #ffffff) -}Titel
 Op groene achtergrondParagraaf
 op witte achtergrond

Methode 3 van 4:

Hoe een gradiëntachtergrond te maken

een. Zoek de HTML-header. Het moet bovenaan het document staan.

2. Onthoud de hoofdsyntaxis van dit proces. Om een verloop te maken, moet u twee hoeveelheden weten: het startpunt / hoek en een aantal kleuren die er een in een andere zullen bewegen. Je kunt een paar kleuren kiezen, zodat ze naar elkaar gaan; je kunt ook de richting of de overgangshoek specificeren.

Achtergrond: lineaire verloop (richting / hoek, color1, color2, color3 enzovoort)-

3. Maak een verticale gradiënt. Als u de richting niet opgeeft, gaat het verloop van boven naar beneden. Om een dergelijke verloop te maken, voert u de volgende code in tussen de tags :

HTML {min-height: 100% -} lichaam {achtergrond: -webkit-lineair-gradiënt (# 93B874, # C9DCB9) -Background: -O-lineaire verloop (# 93B874, # C9DCB9) -Background: -Moz-lineair -Gradient (# 93B874, # C9DCB9) -Background: lineair-gradiënt (# 93B874, # C9DCB9) -Background-kleur: # 93B874-}

In verschillende browsers wordt de verloopfunctie anders geïmplementeerd, dus u moet meerdere code-versies toevoegen.

4. Maak een gerichte verloop. Als u niet wilt dat het verloop verticaal gaat, geef dan de richting van de kleurenovergang op. Om dit te doen, voert u de volgende code in tussen de tags :

HTML {min-hoogte: 100% -} lichaam {achtergrond: -Webkit-lineair-gradiënt (links, # 93b874, # C9DCB9) -Background: -O-lineair-gradiënt (rechts, # 93b874, # C9DCB9) -Background: -Moz-lineaire verloop (rechts # 93b874, # C9DCB9) -Background: lineaire verloop (naar rechts, # 93b874, # C9DCB9) -Background-kleur: # 93B874-}

Als je wilt, stop dan de woorden "links" (links) en "rechts" (rechts) om te experimenteren met verschillende richtingen van het verloop.

vijf. Gebruik andere eigenschappen om het verloop in te stellen. Met hem kunt u meer doen dan het lijkt.

Bijvoorbeeld, na elke kleur kunt u een cijfer in percentage invoeren. Dus u geeft aan welke ruimte elk kleursegment zal bezetten. Hier is een voorbeeldcode met dergelijke parameters:

Achtergrond: lineair -gradiënt (# 93B874 10%, # C9DCB9 70%, # 000000 90%)-

Voeg transparantie toe aan kleur. In dit geval zal hij geleidelijk vervagen. Gebruik dezelfde kleur om verzwakkingseffect te bereiken. Om de kleur in te stellen, hebt u een functie nodig RGBA (). De laatste waarde bepaalt de transparantie: 0 - ondoorzichtige kleur en een - transparante kleur.

Achtergrond: lineair -gradiënt (naar rechts, RGBA (147,184,116,0), RGBA (147,184,116,1))-

6. Bekijk Code. De code voor het maken van een kleurgradiënt als een webpagina-achtergrond ziet er zoiets uit:

 {min-hoogte: 100% -} lichaam {achtergrond: -webkit-lineair-gradiënt (links, # 93B874, # C9DCB9) -Background: -O-lineair-gradiënt (rechts, # 93b874, # C9DCB9) -Background: - Moz-linear-gradiënt (rechts # 93b874, # C9DCB9) -Background: lineaire verloop (naar rechts # 93b874, # C9DCB9) -Background-color: # 93B874-}

Methode 4 van 4:

Hoe een veranderende achtergrond te maken

een. Zoek de HTML-header. Het moet bovenaan het document staan.

2. Voeg de eigenschap Animatie toe aan het "lichaam" -element. Voer de volgende code in na "Body {" en naar de sluitingsbrace:

-Webkit-animatie: ColorChange 60s Infinite-Animatie: ColorChange 60s Infinite-

De bovenste regel van de tekst is ontworpen voor op chromium gebaseerde browsers en de onderste regel van de tekst - voor andere browsers.

3. Kleuren toevoegen aan de eigenschap "Animation". Gebruik de regel "@keyframes" om de achtergrondkleuren in te stellen die cyclisch zullen veranderen, evenals de tijd waarin elke kleur op de pagina wordt weergegeven. Vergeet niet om een andere code in te voeren voor verschillende browsers. Voer de volgende code in onder de sluitingssteun van het lichaamselement:

@ -Webkit-keyframes ColorChange {0% {background: # 33FFFF3-} 25% {background: # 78281F-} 50% {background: # 117A65-} 75% {background: # DC7633-} 100% {achtergrond: # 9B59B6 -}} @ Keyframes ColorChange {0% {background: # 33FFFF3-} 25% {achtergrond: # 78281F-} 50% {background: # 117A65-} 75% {background: # DC7633-} 100% {achtergrond: # 9B59B6 -}}

Houd er rekening mee dat twee regels (@ -Webkit-keyframes en @KeyFRAMES) Heb dezelfde kleuren achtergrond en interesse. Dit gebeurt om de achtergrond correct in elke browser te veranderen.

Interesse (0%, 25% Enzovoort) Geef een deel van de tijd aan (60 S). Wanneer de pagina is geladen, zal de achtergrond kleur zijn # 33fff3. Wanneer 15 ° C (25% van 60 s), wordt de achtergrond veranderd in kleur # 7821F enz.

Verander de tijd en kleur zodat ze overeenkomen met het gewenste resultaat.

4. Bekijk Code. De code voor het maken van een veranderende achtergrond moet er als volgt uitzien:

 {-Webkit-animatie: ColorChange 60s Infinite-Animatie: ColorChange 60s Infinite -} @ - Webkit-keyframes ColorChange {0% {background: # 33FFFF3-} 25% {background: # 78281F-} 50% {background: # 117A65- } 75% {Achtergrond: # DC7633-} 100% {Achtergrond: # 9B59B6 -}} @ Keyframes ColorChange {0% {achtergrond: # 33fff3-} 25% {background: # 78281F-} 50% {achtergrond: # 117A65- } 75% {Achtergrond: # DC7633-} 100% {Achtergrond: # 9B59B6-}}

Tips

Als u de hoofdkleuren in de HTML-code wilt gebruiken, kunt u de namen van de kleuren invoeren (zonder symbool #), en niet hun numerieke codes. Om een oranje achtergrond te maken, enter Achtergrondkleur: Oranje-.
Als een webpagina kunt u installeren afbeelding.