CSS-achtergrond versus achtergrondkleur

-tag en vervolgens een kop en alinea toevoegen.

HTML

< div >

< h1 > LinuxHint < / h1 >

< p > Welkom op onze website < / p >

< / div >

In CSS passen we de hoogte van de div aan als ' 100% ” om het op de hele pagina en lettergrootte van de tekst te laten verschijnen als “ xx-groot ”. Stel daarna de achtergrondkleur in als ' aqua ”.

CSS

div {

hoogte : 100% ;

lettertypegrootte : xx-groot ;

Achtergrond kleur : aqua ;

}

In de onderstaande afbeelding kunt u zien dat de achtergrondkleur is toegepast:

CSS-achtergrondafbeelding Eigenschap

De ' achtergrond afbeelding ” eigenschap wordt gebruikt om een ​​of meer afbeeldingen in te stellen als achtergrond van de HTML-elementen. U kunt deze eigenschap gebruiken om verschillende achtergrondafbeeldingen toe te voegen voor verschillende elementen.

Syntaxis

De syntaxis van de eigenschap background-image is:

achtergrondafbeelding: url()

Geef hier het pad van de afbeelding die u als achtergrond wilt instellen als argument voor de ' url() ”.

Voorbeeld

Voeg in het vervolg van het vorige voorbeeld een achtergrondafbeelding toe in de ' div ' klas. We zullen de url van de afbeelding toevoegen als “ url(img.jpg) ”:

div {

...

achtergrond afbeelding : url ( img.jpg ) ;

}

De onderstaande uitvoer geeft aan dat de achtergrondafbeelding met succes is toegevoegd:

Merk op dat de afbeelding wordt herhaald. Bekijk de volgende eigenschap om dit probleem op te lossen.

CSS background-repeat Property

Wanneer u een afbeelding als achtergrond op een webpagina toevoegt, wordt deze standaard herhaald. Om deze herhaling te voorkomen en het patroon naar keuze in te stellen, achtergrond herhaling ” eigendom wordt gebruikt.

Syntaxis

De syntaxis van de eigenschap background-repeat is:

achtergrond herhaling : herhalen | herhaal-x | herhaal-y | niet herhalen

De beschrijving van de vermelde waarden van de eigenschap background-repeat wordt hieronder gegeven:

• herhalen: Het wordt gebruikt om het beeld in beide richtingen te herhalen, verticaal en horizontaal.
• herhaal-x: Het wordt gebruikt om de herhaling van de afbeelding alleen horizontaal in te stellen.
• herhaal-y: Het specificeert de verticale herhaling van de afbeelding.
• niet herhalen: Het wordt gebruikt om herhaling van de afbeelding te voorkomen.

Voorbeeld

Hier zullen we de waarde van de background-repeat eigenschap instellen als “ niet herhalen ”:

div {

...

achtergrond herhaling : niet herhalen ;

}

Het resultaat van de hierboven verstrekte code wordt hieronder gegeven. Je kunt zien dat de afbeelding niet meer wordt herhaald:

CSS-achtergrondpositie Eigenschap

Om de positie van de achtergrondafbeelding in te stellen, achtergrondpositie ” eigendom wordt gebruikt. Hiermee kunt u het beeld in verschillende posities aanpassen, zoals links boven, links in het midden, links onder, rechts boven, rechts in het midden en nog veel meer.

Syntaxis

De syntaxis van de eigenschap background-position is:

achtergrondpositie : waarde

In plaats van ' waarde ”, kunt u de positie van de afbeelding specificeren.

Voorbeeld

Hier zullen we de achtergrondpositie instellen als ' centrum ”:

div {

...

achtergrondpositie : centrum ;

}

In de onderstaande uitvoer verschijnt de afbeelding in het midden van de pagina:

CSS-eigenschap op achtergrondformaat

Om de grootte van de achtergrondafbeelding in te stellen, achtergrondformaat ” eigendom wordt gebruikt.

Syntaxis

Achtergrondgrootte heeft de volgende syntaxis:

achtergrondformaat : lengte|omslag

Hieronder volgt de beschrijving van de waarden van de eigenschap background-size:

• lengte: Het wordt gebruikt om de breedte en hoogte van de achtergrondafbeelding vast te stellen.
• omslag: Het wordt gebruikt om de achtergrondafbeelding in de hele achtergrond aan te passen.

Voorbeeld

We zullen de grootte van de achtergrond instellen als ' 100% ” hoogte en “ 80% ' breedte:

div {

...

achtergrondformaat : 100% 80% ;

}

U kunt zien dat het formaat van de afbeelding is aangepast op basis van de opgegeven afmetingen:

CSS achtergrond-oorsprong eigenschap

De ' achtergrond-oorsprong ” eigenschap wordt gebruikt om het positioneringsgebied van de achtergrondafbeelding aan te passen. De afbeelding wordt standaard in de linkerbovenhoek aangepast.

Syntaxis

De syntaxis van de eigenschap background-origin is:

achtergrond-oorsprong : opvuldoos| border-box | inhoud-box

De waarden van de eigenschap background-origin worden hieronder beschreven:

• opvuldoos: Het is de standaardwaarde van de background-origin-eigenschap die wordt gebruikt om de positie van de achtergrondafbeelding aan te passen aan de opvulrand.
• border-box: Het wordt gebruikt om de afbeelding in te stellen volgens het kader van de afbeelding.
• inhoud-box: Het wordt gebruikt om de achtergrondafbeelding in te stellen in overeenstemming met de inhoud van de afbeelding.

Opmerking: De eigenschap background-origin werkt niet als de waarde van de eigenschap background-attachment is ingesteld op “ gemaakt ”.

Voorbeeld

Maak eerst een rand rond de container. Hier gaan we verder met het vorige voorbeeld en stellen we de opvulwaarde in als ' 10px ”. Pas daarna de randbreedte aan als ' 15px ”, stijl als “ bergkam ”, en kleur als “ RGB(1, 68, 68) ”. Uiteindelijk zullen we de waarde van de eigenschap background-origin toewijzen als ' inhoud-box ”:

div {

...

opvulling : 10px ;

grens : 15px bergkam rgb ( 1 , 68 , 68 ) ;

achtergrond-oorsprong : inhoud-box ;

}

Het resultaat van de hierboven verstrekte code wordt hieronder gegeven. Je kunt zien dat de positie van de afbeelding is ingesteld op basis van de inhoud van de div:

CSS-achtergrondclip Eigenschap

De ' achtergrond-clip ” eigenschap werkt op de achtergrondkleur van het element. Hiermee kunt u bepalen hoe ver een achtergrondkleur verder reikt dan een element, zoals de opvulling, de rand en de inhoud van het element.

Syntaxis

De syntaxis van de eigenschap background-clip is:

achtergrond-oorsprong : border-box | opvuldoos | inhoud-box

De waarden van de eigenschap background-origin worden hieronder beschreven:

• border-box: Dit is de standaardwaarde van de eigenschap background-origin die wordt gebruikt om de achtergrondkleur achter de rand in te stellen.
• opvuldoos: Het wordt gebruikt om de kleur binnen het opvulvak van het element aan te passen.
• inhoud-box: Het wordt gebruikt om de achtergrondkleur in te stellen op basis van de inhoud van het element.

Voorbeeld

We gaan verder met het vorige voorbeeld en wijzigen de waarde van de randstijl in ' gestippeld ” om de eigenschap background-clip te begrijpen. Daarna zullen we de waarde van de eigenschap background-clip instellen als ' opvuldoos ”:

div {

...

achtergrond-clip : opvuldoos ;

}

De uitvoer geeft aan dat de witte achtergrondkleur verschijnt wanneer de randrand eindigde:

CSS background-attachment Property

De ' achtergrond-bijlage ” eigenschap wordt gebruikt om het gedrag of de afbeelding aan te passen tijdens het scrollen op de pagina. Het gedrag kan worden ingesteld met scrollen met andere elementen of vast.

Syntaxis

De syntaxis van de eigenschap background-attachment is:

achtergrond-bijlage : waarde

U kunt de waarde van achtergrondbijlage instellen als ' gemaakt ” om de achtergrondafbeelding te corrigeren of “ rol ” om de afbeelding met de pagina mee te laten scrollen.

Opmerking: Standaard is de waarde van de eigenschap background-attachment ingesteld als “ rol ”.

Het is te zien dat de toegevoegde achtergrondafbeelding niet statisch is wanneer we hebben gescrolld. Laten we dit probleem nu oplossen.

Om dit te doen, stellen we de waarde van de eigenschap background-attachment in als ' gemaakt ”:

div {

...

achtergrond-bijlage : gemaakt ;

}

Hier is het resultaat dat aantoont dat de afbeelding is opgelost:

Ga nu naar de vergelijking tussen de eigenschappen van de achtergrond en de achtergrondkleur.

CSS-achtergrond versus achtergrondkleur

De gegeven tabel onderscheidt de eigenschappen van de achtergrond en de achtergrondkleur op basis van hun kenmerken:

Functies	CSS-achtergrond	CSS achtergrondkleur
Type	Het is een super eigendom.	Het is een subproperty van background property.
Functionaliteit	Het stelt alle achtergrondeigenschappen in.	Het stelt alleen de achtergrondkleur in.
Bereik	Het ondersteunt alle achtergrondeigenschappen	Het ondersteunt alleen de eigenschap achtergrondkleur
Niveau	Wanneer u meerdere achtergrondwaarden moet toevoegen, is het gemakkelijk te gebruiken. U kunt de waarden van alle achtergrondeigenschappen tegelijk instellen.	Het kan worden gebruikt wanneer u slechts één achtergrondkleur hoeft toe te voegen.
Syntaxis	achtergrond: waarden (Waarden zijn bg-color, bg-image en andere eigenschappen)	achtergrondkleur: kleur

Er is uitgelegd hoe de eigenschappen van de achtergrondkleur verschillen van de eigenschappen van de achtergrond.

Conclusie

CSS ' achtergrond 'eigenschap is een steno-eigenschap die wordt gebruikt om meerdere achtergrondwaarden tegelijk in te stellen, zoals kleur, afbeelding, positie, grootte, oorsprong en meer. Aan de andere kant, ' Achtergrond kleur ” wordt alleen gebruikt om kleur aan de achtergrond toe te voegen. In deze handleiding hebben we het verschil besproken tussen de CSS-achtergrondeigenschap en de CSS-achtergrondkleureigenschap.