Hoe de achtergrondkleur in HTML in te stellen

Als u de achtergrondkleur van een webpagina in HTML wilt instellen, hoeft u slechts een snelle wijziging in de hoofdtekst van de code aan te brengen (element "lichaam"), binnen de labels. De stappen kunnen variëren, afhankelijk van het uiterlijk dat u aan uw fonds wilt geven. Leer hoe u een effen kleur, een afbeelding, een kleurverloop of een meerkleurenanimatie instelt voor de achtergrond van uw webpagina.

Inhoud

Stappen

Methode 1stel een effen achtergrondkleur in
Methode 3stel een achtergrond in met verloopkleuren
Methode 4stel een achtergrond in die van kleur verandert

stappen

Methode 1
Stel een effen achtergrondkleur in

Open het HTML-bestand met uw gewenste teksteditor. Vanaf HTML 5 werd het HTML-kenmerk niet meer gebruikt . Nu moet de achtergrondkleur, evenals alle andere aspecten met betrekking tot de paginastijl, worden vastgesteld via CSS-code.

Voeg de labels toe aan uw document. Alle stijlinformatie van de pagina (inclusief de achtergrondkleur) moet in die labels worden opgenomen. Als uw document al de labels heeft. Alles wat u toevoegt binnen het element "lichaam" in CSS heeft invloed op de hele pagina.

 gebruik van de eigenschap "background-color".

Voeg de tags toe aan het HTML-bestand. Alle stijlinformatie op de pagina (inclusief de achtergrondkleur) moet binnen deze labels worden gecodeerd. Als u deze tags al hebt opgenomen, gaat u gewoon naar dat deel van het bestand.

. Alles wat u in het element toevoegt "lichaam" in CSS heeft invloed op de hele pagina.

Voeg de eigenschap toe "background-image" naar het element "lichaam". Wanneer u deze eigenschap toevoegt, moet u de naam van het afbeeldingsbestand opnemen. Zorg ervoor dat het bestand van de afbeelding wordt opgeslagen in dezelfde map als het HTML-bestand (anders moet u het volledige pad van het bestand op de webserver invoeren).

Het zou ook een goed idee zijn om de eigenschap toe te voegen "background-color", voor het geval de achtergrondafbeelding niet wordt geladen.

Het is ook mogelijk om meerdere lagen met afbeeldingen toe te voegen. U kunt meerdere afbeeldingen op elkaar stapelen. Dit kan handig zijn als u afbeeldingen met transparante achtergronden hebt die elkaar aanvullen wanneer u ze stapelt.

De eerste afbeelding in de lijst wordt boven de andere weergegeven. De tweede verschijnt onder de eerste enzovoort.

Methode 3
Stel een achtergrond in met verloopkleuren

Gebruik CSS om een achtergrond met een kleurverloop te maken. Als u op zoek bent naar iets met meer stijl dan een eenvoudig effen achtergrondkleur, maar niet zo geladen als een veelkleurige animatie, je kunt een verloop van kleuren proberen. Verlopen zijn kleuren die geleidelijk overgaan in andere kleuren. U kunt het verloop maken en aanpassen met behulp van CSS. Om een verloop te kunnen maken, is het noodzakelijk om de basisaspecten van de stijl van pagina`s met CSS te begrijpen.

Leer de basissyntaxis. Om een verloop te maken, hebt u twee gegevens nodig: het punt of de hoek van de start en de kleuren waartussen u de overgang maakt. U kunt verschillende kleuren selecteren en het verloop ertussen maken. U kunt ook een adres of een hoek voor het verloop instellen.

achtergrond: lineair verloop (richting of hoek, kleur1, kleur2, kleur3, enz.) -

Maak een verticaal verloop. Als u de richting niet opgeeft, gaat het verloop van boven naar beneden, van boven naar beneden. Verschillende browsers hebben verschillende implementaties van de gradiëntfuncties, dus het is beter om verschillende versies van de code op te nemen om compatibel te zijn met alle.

Maak een directioneel verloop. Als u de richting van het verloop opgeeft, kunt u vaststellen op welke manier de kleur verandert. Houd er rekening mee dat verschillende browsers verschillende manieren hebben om adressen te interpreteren. Echter, alle tonen hetzelfde verloop.

Gebruik andere eigenschappen om het verloop aan te passen. Er zijn nog veel meer dingen die u met hellingen kunt doen.

U kunt bijvoorbeeld niet alleen meer dan twee kleuren toevoegen, maar u kunt ook een percentage voor elke kleur opgeven. Op deze manier kunt u vaststellen hoeveel ruimte elk kleursegment moet innemen.

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

Bepaal de transparantie van de kleuren. Op deze manier kun je de kleuren laten verdwijnen. U kunt bijvoorbeeld een kleur laten vervagen van zichzelf naar niets. Om dit te doen, moet u de kleur definiëren via de functie rgba (). De definitieve waarde bepaalt de transparantie: 0 Het is volledig solide en 1 volledig transparant.

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

Methode 4
Stel een achtergrond in die van kleur verandert

Ga naar de sectie van de HTML-code. Als je niet van eenkleurige achtergrond houdt, probeer dan te experimenteren met een geanimeerde achtergrond die van kleur verandert. Vanaf HTML 5 moeten alle achtergrondspecificaties worden opgenomen in de CSS-code (cascading style sheets). Als u nog nooit een achtergrond met CSS hebt vastgesteld, gaat u naar de sectie "Stel een effen achtergrondkleur in" van dit artikel voordat u deze methode uitprobeert.

Voeg de animatie-eigenschap toe aan het element "lichaam". U moet twee verschillende eigenschappen toevoegen, omdat verschillende browsers de code anders interpreteren.

Het eigendom -WebKit-animatie is noodzakelijk voor browsers op basis van Chromium (Chrome, Opera, Safari). animatie Het is de standaard eigenschap voor andere browsers.

In dit voorbeeld ColorChange dit is de naam van de animatie.

60s (60 seconden) geeft de duur van de animatie of overgang aan. Zorg ervoor dat u deze waarde instelt in zowel de webkit als de standaardsyntaxis.

oneindig geeft aan dat de animatie voor onbepaalde tijd moet worden herhaald. Als je liever hebt dat de transformatie van kleuren maar één keer voorkomt en stopt in de laatste kleur, kun je dat gedeelte leeg laten.

Voeg de kleuren van de animatie toe. Nu moet je de @keyframes regel gebruiken om de achtergrond kleuren die u wilt terugkeren, evenals de duur u wilt elke kleur op de pagina hebt ingesteld. Nogmaals, moet u verschillende vermeldingen plaatst voor verschillende groepen van browsers.

Houd in gedachten dat de twee regels (@ -webkit-keyframes en @keyframes) hebben dezelfde kleuren en percentages voor de achtergrond. Het is beter dat deze waarden uniform blijven, zodat de effecten er in alle browsers hetzelfde uitzien.

De percentages (0%, 25%, enz.) zijn in verhouding tot de totale duur van de animatie (60s). Wanneer de pagina wordt geladen, is de achtergrondkleur 0% (# 33FFF3). Nadat de animatie 25% van de 60 seconden is afgespeeld, wordt de achtergrond omgezet in # 78281F en zo verder.

U kunt de tijden en kleuren wijzigen om ze aan te passen aan het gewenste resultaat.

Delen op sociale netwerken:

Verwant