7 CSS-achtergrondeigenschappen om uw webontwerpen op te fleuren

Het achtergrondthema van uw website kan de look en feel aanzienlijk beïnvloeden. Kleuren, afbeeldingen en achtergrondpatronen roepen emotie op en creëren geweldige gebruikerservaringen.

U kunt CSS-achtergrondeigenschappen gebruiken om de achtergrondstijl van HTML-elementen in te stellen. Leer alles over enkele van de CSS-eigenschappen die u kunt gebruiken om uitstekende achtergronden te creëren.

1. Achtergrond kleur

De eigenschap achtergrondkleur bepaalt de kleur van de achtergrond van een element. U kunt de kleur instellen met een naam zoals "rood", een HEX-waarde zoals "#00FF00" of een RGB-waarde - zoals "rgb (0, 255, 0)". U kunt ook een HSL-waarde gebruiken om de achtergrondkleur in te stellen met tint, verzadiging en lichtheid.

In het volgende voorbeeld wordt de achtergrondkleur van de hele pagina ingesteld op oranje. De kopelementen krijgen elk een andere achtergrond.

<lichaam>
<h2>Ik ben Groenh2>
<h3>ik ben roodh3>
<h4>Ik ben blauwh4>
lichaam>

Met behulp van CSS kunt u op elk element een unieke achtergrondkleur toepassen:

lichaam {
Achtergrond kleur: oranje;
}
h2 {
Achtergrond kleur: #006600;
}
h3 {
Achtergrond kleur: RGB(128, 0, 0);
}
h4{
Achtergrond kleur: hsl(240, 100%, 50%);
}

Dit zal de pagina er zo uit laten zien:

U kunt de eigenschap opacity gebruiken om de transparantie van een element te bepalen. Dekking heeft waarden tussen 0,0 en 1,0. Hoe lager de waarde, hoe transparanter het element is.

Probeer bijvoorbeeld de dekking van een body-element in te stellen op 0,5:

lichaam {
Achtergrond kleur:oranje;
ondoorzichtigheid:0.5;
}

Dit wordt als volgt weergegeven: vergelijk de kleuren met die in de vorige schermafbeelding:

2. achtergrond afbeelding

De eigenschap background-image stelt een afbeelding in als de achtergrond van een element. U kunt verwijzen naar een lokale afbeelding of een afbeelding van internet.

<lichaam>
 <h1>Hallodaar!h1>
 <P>IhebbeneenafbeeldinginMijnachtergrond!P>
lichaam>

Het CSS-bestand:

lichaam {
achtergrond afbeelding:url("https://afbeeldingen.pexels.com/foto's/1191710/pexels-foto-1191710.jpeg?auto=samendrukken&cs=tinysrgb&w=1260&H=750&dpr=1");
}

Dit wordt als volgt weergegeven:

Je kan ook gebruiken achtergrondgradiënten om een ​​unieke look voor uw toepassing te creëren.

3. achtergrond herhaling

De eigenschap background-image herhaalt afbeeldingen standaard. U kunt ervoor kiezen om de afbeelding horizontaal op de x-as of verticaal op de y-as te herhalen.

Als een herhaling niet bij uw stijl past, kunt u deze ook verwijderen met behulp van de waarde geen herhaling.

<lichaam>
<h1>Hallo daar!h1>
<h3>Ik demonstreer de eigenschap repeat background-repeat op de x-as!h3>
lichaam>

Gebruik de volgende CSS om een ​​herhalende achtergrond langs de x-as toe te passen:

lichaam {
achtergrond afbeelding: url("https://afbeeldingen.pexels.com/foto's/459335/pexels-foto-459335.jpeg?auto=samendrukken&cs=tinysrgb&w=1260&H=750&dpr=1");
achtergrond herhaling: herhaal-x;
}

Het resultaat:

Probeer vervolgens de afbeelding op de y-as te herhalen:

lichaam {
achtergrond afbeelding:url("https://cdn.pixabay.com/foto/2016/04/18/22/05/schelpen-1337565__340.jpg");
achtergrond herhaling:herhaal-y;
}

Het resultaat:

Het voorbeeld op de y-as ziet er zeker vervormd uit. Als dit niet de patronen zijn die u zoekt, kunt u dit aangeven geen herhaling in plaats van:

lichaam {
achtergrond afbeelding:url("https://afbeeldingen.pexels.com/foto's/259915/pexels-foto-259915.jpeg?auto=samendrukken&cs=tinysrgb&w=600");
achtergrond herhaling: geen herhaling;
}

Het resultaat:

4. achtergrond-positie

De eigenschap background-position definieert de positie van de achtergrondafbeelding binnen het element. Het gebruikt positiespecifieke zoekwoorden zoals centrum, bovenkant, En onderkantof een pixel- of percentagewaarde.

Voeg een eigenschap background-position toe aan de laatste afbeelding:

lichaam {
achtergrond afbeelding: url("https://afbeeldingen.pexels.com/foto's/259915/pexels-foto-259915.jpeg?auto=samendrukken&cs=tinysrgb&w=600");
achtergrond-positie: bovenkantcentrum;
}

Het zal er zo uitzien:

U kunt zien dat de afbeelding het uiterlijk van de website vervormt. Laten we dat oplossen met de volgende eigenschap.

5. achtergrondformaat

U kunt de eigenschap achtergrondafbeelding gebruiken om een ​​specifieke grootte voor de afbeelding te definiëren. Het gebruikt trefwoorden zoals omslag En bevatten of een pixel- of percentagewaarde. Laten we de vervormde achtergrondafbeelding corrigeren door een eigenschap voor achtergrondgrootte toe te voegen.

lichaam {
 achtergrondafbeelding: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=comprimeren&cs=tinysrgb&w=600");
 achtergrondherhaling: geen herhaling;
 achtergrondpositie: midden;

Het resultaat laat zien dat de afbeelding nu proportioneel de webpagina bedekt.

6. achtergrond bijlage

De eigenschap background-attachment definieert of de positie van de achtergrondafbeelding vast blijft of scrolt. U kunt de trefwoorden vast of scrollen.

Laten we dat laten zien in de volgende code:

<lichaam>
<h1>De eigenschap background-attachmenth1>
<P>Met de eigenschap Fixed Attachment zult u merken dat de achtergrond niet meebeweegt met de tekst.P>
<P>Met de eigenschap Fixed Attachment zult u merken dat de achtergrond niet meebeweegt met de tekst.P>
<P>Met de eigenschap Fixed Attachment zult u merken dat de achtergrond niet meebeweegt met de tekst.P>
<P>Met de eigenschap Fixed Attachment zult u merken dat de achtergrond niet meebeweegt met de tekst.P>
<P>Met de eigenschap Fixed Attachment zult u merken dat de achtergrond niet meebeweegt met de tekst.P>
<P>Met de eigenschap Fixed Attachment zult u merken dat de achtergrond niet meebeweegt met de tekst.P>
<P>Met de eigenschap Fixed Attachment zult u merken dat de achtergrond niet meebeweegt met de tekst.P>
<P>Met de eigenschap Fixed Attachment zult u merken dat de achtergrond niet meebeweegt met de tekst.P>
<P>Met de eigenschap Fixed Attachment zult u merken dat de achtergrond niet meebeweegt met de tekst.P>
<P>Met de eigenschap Fixed Attachment zult u merken dat de achtergrond niet meebeweegt met de tekst.P>
<P>Met de eigenschap Fixed Attachment zult u merken dat de achtergrond niet meebeweegt met de tekst.P>
<P>Met de eigenschap Fixed Attachment zult u merken dat de achtergrond niet meebeweegt met de tekst.P>
lichaam>

Het CSS-bestand:

lichaam {
achtergrond afbeelding: url("https://afbeeldingen.pexels.com/foto's/96627/pexels-foto-96627.jpeg?auto=samendrukken&cs=tinysrgb&w=600");
achtergrond herhaling: geen herhaling;
achtergrond-positie: centrum;
achtergrondformaat: omslag;
achtergrond bijlage: vast;
}

Als u naar beneden gaat op de pagina, ziet u dat de achtergrond niet beweegt:

Om de eigenschap scroll background-attachment te demonstreren, wijzigt u het trefwoord in rol. U zult merken dat de achtergrond nu met de tekst meebeweegt.

lichaam {
achtergrond afbeelding: url("https://afbeeldingen.pexels.com/foto's/96627/pexels-foto-96627.jpeg?auto=samendrukken&cs=tinysrgb&w=600");
achtergrond herhaling: geen herhaling;
achtergrond-positie: centrum;
achtergrondformaat: omslag;
achtergrond bijlage: rol;
}

7. De achtergrond Shorthand Property

U merkt misschien dat u verschillende eigenschappen moet opnemen om de perfecte achtergrond te krijgen. Dit omvat het schrijven van veel code. Maar u kunt de code inkorten met behulp van de steno-eigenschap op de achtergrond.

Met de steno-eigenschap kunt u veel achtergrondeigenschappen op één regel instellen. Je gebruikt het trefwoord achtergrond om de steno-eigenschap in te stellen.

Bijvoorbeeld, in plaats van code als volgt te schrijven:

lichaam {
Achtergrond kleur: groente;
achtergrond afbeelding: url("laptop3.jpg");
achtergrond herhaling: geen herhaling;
achtergrondformaat: omslag;
achtergrond-bijlage: rol;
achtergrond-positie: centrum;
}

Je kunt het op één regel schrijven, zoals dit:

lichaam {
achtergrond: groenteurl("laptop3.jpg") geen herhalingomslagrolcentrum;
}

De steno-eigenschap volgt een bepaalde volgorde. U moet de eigenschappen in die volgorde uitlijnen, zelfs als er een of meer ontbreken. De volgorde is:

• Achtergrond kleur
• achtergrond afbeelding
• achtergrond herhaling
• achtergrond bijlage
• achtergrond-positie

U kunt interessante ontwerpen maken met CSS met behulp van verschillende achtergrond patronen. Met deze patronen kunt u unieke en opvallende achtergronden voor uw website bereiken.

Andere achtergrondeigenschappen in CSS

CSS is krachtig en u kunt er veel mee doen om uw toepassing op te fleuren. U kunt eigenschappen zoals background-clip, background-origin en background-blend-mode gebruiken om wat animatie toe te voegen.

U kunt ook verlopen en patronen gebruiken om uw pagina's aan te passen. Experimenteer met CSS-achtergrondeigenschappen om uw vaardigheden op het gebied van webontwerp aan te scherpen.