CSS-bakgrund vs bakgrundsfärg

och lägger sedan till en rubrik och ett stycke.

HTML

< div >

< h1 > LinuxTips < / h1 >

< sid > Välkommen till vår hemsida < / sid >

< / div >

I CSS kommer vi att justera höjden på div som ' 100 % ' för att få den att visas på hela sidan och textens teckenstorlek som ' xx-stor ”. Efter det, ställ in bakgrundsfärgen som ' aqua ”.

CSS

div {

höjd : 100 % ;

textstorlek : xx-stor ;

bakgrundsfärg : aqua ;

}

I bilden nedan kan du se att bakgrundsfärgen tillämpas:

CSS background-image Egenskap

den ' bakgrundsbild ”-egenskapen används för att ställa in en eller flera bilder som bakgrund för HTML-elementen. Du kan använda den här egenskapen för att lägga till olika bakgrundsbilder för olika element.

Syntax

Syntaxen för egenskapen bakgrundsbild är:

bakgrundsbild: url()

Ange här sökvägen till bilden du vill ange som bakgrund som ett argument till ' url() ”.

Exempel

I fortsättningen av föregående exempel, lägg till en bakgrundsbild i ' div ' klass. Vi kommer att lägga till webbadressen till bilden som ' url(img.jpg) ”:

div {

...

bakgrundsbild : url ( img.jpg ) ;

}

Nedanstående utdata indikerar att bakgrundsbilden har lagts till:

Observera att bilden upprepas. För att lösa det här problemet, kolla in nästa egenskap.

CSS-bakgrundsupprepningsegenskap

När du lägger till en bild som bakgrund på en webbsida, upprepas den som standard. För att undvika denna upprepning och ställa in mönstret enligt ditt val, ' bakgrund-upprepa ” fastigheten utnyttjas.

Syntax

Syntaxen för egenskapen background-repeat är:

bakgrund-upprepa : upprepa | upprepa-x | upprepa-y | ingen upprepning

Beskrivningen av de angivna värdena för bakgrundsupprepningsegenskapen ges nedan:

• upprepa: Den används för att upprepa bilden i båda riktningarna, vertikalt och horisontellt.
• repeat-x: Den används för att endast ställa in upprepningen av bilden horisontellt.
• upprepa-y: Den anger den vertikala upprepningen av bilden.
• icke-upprepa: Den används för att undvika upprepning av bilden.

Exempel

Här kommer vi att ställa in värdet på egenskapen background-repeat som ' ingen upprepning ”:

div {

...

bakgrund-upprepa : ingen upprepning ;

}

Resultatet av ovanstående kod ges nedan. Du kan se att bilden inte upprepas längre:

Egenskap för CSS-bakgrundsposition

För att ställa in positionen för bakgrundsbilden, ' bakgrundsposition ” egendom används. Det låter dig justera bilden i olika positioner som vänster upptill, vänster mitten, vänster nere, höger upptill, höger mitten och många fler.

Syntax

Syntaxen för egenskapen bakgrundsposition är:

bakgrundsposition : värde

I stället för ' värde ”, kan du ange bildens position.

Exempel

Här kommer vi att ställa in bakgrundspositionen som ' Centrum ”:

div {

...

bakgrundsposition : Centrum ;

}

I utgången nedan visas bilden i mitten av sidan:

CSS-egenskap i bakgrundsstorlek

För att ställa in storleken på bakgrundsbilden, ' bakgrundsstorlek ” egendom används.

Syntax

Bakgrundsstorlek har följande syntax:

bakgrundsstorlek : längd|omslag

Följande är beskrivningen av värdena för egenskapen i bakgrundsstorlek:

• längd: Den används för att fixera bredden och höjden på bakgrundsbilden.
• omslag: Den används för att justera bakgrundsbilden i hela bakgrunden.

Exempel

Vi kommer att ställa in storleken på bakgrunden som ' 100 % 'höjd och' 80 % ' bredd:

div {

...

bakgrundsstorlek : 100 % 80 % ;

}

Du kan se att bilden har ändrats storlek baserat på de angivna måtten:

CSS-egenskap med bakgrundsursprung

den ' bakgrund-ursprung ”-egenskapen används för att justera positioneringsområdet för bakgrundsbilden. Bilden justeras i det övre vänstra hörnet som standard.

Syntax

Syntaxen för egenskapen background-origin är:

bakgrund-ursprung : padding-box| border-box | innehållslåda

Värdena för egenskapen background-origin beskrivs nedan:

• stoppningsbox: Det är standardvärdet för egenskapen background-origin som används för att justera positionen för bakgrundsbilden enligt utfyllnadskanten.
• border-box: Den används för att ställa in bilden enligt bildens kantruta.
• innehållslåda: Den används för att ställa in bakgrundsbilden i enlighet med bildens innehåll.

Notera: Egenskapen background-origin fungerar inte om värdet för egenskapen background-attachment är inställt som ' fast ”.

Exempel

Skapa först en kant runt behållaren. Här fortsätter vi med föregående exempel och ställer in utfyllnadsvärdet som ' 10px ”. Efter det, justera kantbredden som ' 15 px ', stil som ' bergsrygg ', och färga som ' rgb(1, 68, 68) ”. I slutändan kommer vi att tilldela värdet av egendomen för bakgrundsursprung som ' innehållslåda ”:

div {

...

stoppning : 10px ;

gräns : 15 px bergsrygg rgb ( 1 , 68 , 68 ) ;

bakgrund-ursprung : innehållslåda ;

}

Resultatet av ovan angivna kod ges nedan. Du kan se att bildens position är inställd enligt innehållet i div:en:

CSS bakgrundsklipp Egenskap

den ' bakgrundsklipp Egenskapen fungerar på elementets bakgrundsfärg. Det låter dig styra hur långt en bakgrundsfärg sträcker sig bortom ett element, till exempel elementets utfyllnad, dess kant och dess innehåll.

Syntax

Syntaxen för egenskapen bakgrundsklipp är:

bakgrund-ursprung : border-box | stoppningsbox | innehållslåda

Värdena för egenskapen background-origin beskrivs nedan:

• border-box: Det är standardvärdet för egenskapen background-origin som används för att ställa in bakgrundsfärgen bakom gränsen.
• stoppningsbox: Den används för att justera färgen i elementets stoppningslåda.
• innehållslåda: Den används för att ställa in bakgrundsfärg efter innehållet i elementet.

Exempel

Vi fortsätter det föregående exemplet och ändrar värdet på kantstilen till ' prickad ” för att förstå egenskapen bakgrundsklipp. Efter det kommer vi att ställa in värdet på egenskapen bakgrundsklipp som ' stoppningslåda ”:

div {

...

bakgrundsklipp : stoppningslåda ;

}

Utdata betyder att den vita bakgrundsfärgen visas när kantkanten slutade:

Egenskap för CSS-bakgrundsbilaga

den ' bakgrundsbilaga ”-egenskapen används för att justera beteendet eller bilden medan du rullar på sidan. Dess beteende kan ställas in att rulla med andra element eller fixas.

Syntax

Syntaxen för egenskapen background-attachment är:

bakgrundsbilaga : värde

Du kan ställa in värdet för bakgrundsbilaga som ' fast ' för att fixa bakgrundsbilden eller ' skrolla ” för att låta bilden rulla med sidan.

Notera: Som standard är värdet på egenskapen för bakgrundsbilaga satt som ' skrolla ”.

Det kan ses att den tillagda bakgrundsbilden inte är statisk när vi har scrollat. Låt oss nu lösa det här problemet.

För att göra det ställer vi in ​​värdet på egenskapen bakgrundsbilaga som ' fast ”:

div {

...

bakgrundsbilaga : fast ;

}

Här är resultatet som visar att bilden har fixats:

Gå nu mot jämförelsen mellan bakgrunds- och bakgrundsfärgegenskaper.

CSS-bakgrund vs bakgrundsfärg

Den givna tabellen kommer att skilja bakgrunds- och bakgrundsfärgegenskaperna på basen av deras funktioner:

Funktioner	CSS bakgrund	CSS bakgrundsfärg
Typ	Det är en super fastighet.	Det är en underegenskap till bakgrundsegendom.
Funktionalitet	Den ställer in alla bakgrundsegenskaper.	Den ställer bara in bakgrundsfärgen.
Räckvidd	Den stöder alla bakgrundsegenskaper	Den stöder bara bakgrundsfärgsegenskapen
Nivå	När du behöver lägga till flera bakgrundsvärden är det lätt att använda. Du kan ställa in värdena för alla bakgrundsegenskaper samtidigt.	Det kan användas när du bara behöver lägga till en enda bakgrundsfärg.
Syntax	bakgrund: värden (Värden är bg-color, bg-image och andra egenskaper)	bakgrundsfärg: färg

Det har förklarats hur bakgrundsfärgegenskaper skiljer sig från bakgrundsegenskaper.

Slutsats

CSS ' bakgrund Egenskapen är en förkortningsegenskap som används för att ställa in flera bakgrundsvärden samtidigt, som färg, bild, position, storlek, ursprung och mer. Å andra sidan, ' bakgrundsfärg ” används endast för att lägga till färg till bakgrunden. I den här guiden har vi diskuterat skillnaden mellan CSS-bakgrundsegenskap och CSS-bakgrundsfärgegenskap.