CSS pozadina u odnosu na boju pozadine

, a zatim ćemo dodati naslov i odlomak.

HTML

< div >

< h1 > LinuxHint < / h1 >

< str > Dobrodošli na našu web stranicu < / str >

< / div >

U CSS-u ćemo prilagoditi visinu diva kao ' 100% ' kako bi se prikazao na cijeloj stranici i veličini fonta teksta kao ' xx-veliki ”. Nakon toga postavite boju pozadine kao ' aqua ”.

CSS

div {

visina : 100% ;

veličina fonta : xx-veliki ;

boja pozadine : aqua ;

}

Na donjoj slici možete vidjeti da je primijenjena boja pozadine:

CSS svojstvo pozadinske slike

' pozadinska slika ” Svojstvo se koristi za postavljanje jedne ili više slika kao pozadine HTML elemenata. Ovo svojstvo možete koristiti za dodavanje različitih pozadinskih slika za različite elemente.

Sintaksa

Sintaksa svojstva pozadinske slike je:

pozadinska slika: url()

Ovdje dajte putanju slike koju želite postaviti kao pozadinu kao argument za ' url() ”.

Primjer

U nastavku prethodnog primjera, dodajte pozadinsku sliku u ' div ” razred. Dodat ćemo url slike kao ' url(img.jpg) ”:

div {

...

pozadinska slika : url ( img.jpg ) ;

}

Ispis u nastavku pokazuje da je pozadinska slika uspješno dodana:

Imajte na umu da se slika ponavlja. Kako biste riješili ovaj problem, pogledajte sljedeće svojstvo.

CSS svojstvo pozadinskog ponavljanja

Kada dodate sliku kao pozadinu na web stranicu, ona se prema zadanim postavkama ponavlja. Kako biste izbjegli ovo ponavljanje i postavili uzorak prema svom izboru, ' pozadinsko ponavljanje ” nekretnina se koristi.

Sintaksa

Sintaksa svojstva pozadinskog ponavljanja je:

pozadinsko ponavljanje : ponoviti | ponovi-x | ponoviti | nema-ponoviti

Opis navedenih vrijednosti svojstva pozadinskog ponavljanja dan je u nastavku:

• ponoviti: Koristi se za ponavljanje slike u oba smjera, okomito i vodoravno.
• ponovi-x: Koristi se za postavljanje ponavljanja slike samo vodoravno.
• ponovi-y: Određuje okomito ponavljanje slike.
• neponavljanje: Koristi se za izbjegavanje ponavljanja slike.

Primjer

Ovdje ćemo postaviti vrijednost svojstva ponavljanja u pozadini kao ' nema-ponoviti ”:

div {

...

pozadinsko ponavljanje : nema-ponoviti ;

}

Ishod gore navedenog koda dan je u nastavku. Možete vidjeti da se slika više ne ponavlja:

CSS svojstvo pozadinske pozicije

Za postavljanje položaja pozadinske slike, ' pozadina-položaj ” koristi se svojstvo. Omogućuje vam podešavanje slike u različitim položajima kao što su lijevo gore, lijevo središte, lijevo dolje, desno gore, desno središte i još mnogo toga.

Sintaksa

Sintaksa svojstva pozadinskog položaja je:

pozadina-položaj : vrijednost

Na mjestu ' vrijednost ”, možete odrediti položaj slike.

Primjer

Ovdje ćemo postaviti položaj pozadine kao ' centar ”:

div {

...

pozadina-položaj : centar ;

}

U ispisu ispod, slika se pojavljuje u sredini stranice:

CSS svojstvo veličine pozadine

Kako biste postavili veličinu pozadinske slike, ' veličina pozadine ” koristi se svojstvo.

Sintaksa

Background-size ima sljedeću sintaksu:

veličina pozadine : duljina|pokrov

Slijedi opis vrijednosti svojstva pozadinske veličine:

• duljina: Koristi se za fiksiranje širine i visine pozadinske slike.
• pokriti: Koristi se za podešavanje pozadinske slike u cijeloj pozadini.

Primjer

Postavit ćemo veličinu pozadine kao ' 100% ' visina i ' 80% ” širina:

div {

...

veličina pozadine : 100% 80% ;

}

Možete vidjeti da je veličina slike promijenjena na temelju navedenih dimenzija:

CSS svojstvo podrijetla pozadine

' pozadina-podrijetlo ” Svojstvo se koristi za podešavanje područja pozicioniranja pozadinske slike. Slika je prema zadanim postavkama podešena u gornjem lijevom kutu.

Sintaksa

Sintaksa svojstva background-origin je:

pozadina-podrijetlo : padding-box| rubni okvir | kutija sa sadržajem

Vrijednosti svojstva background-origin opisane su u nastavku:

• padding-box: To je zadana vrijednost svojstva background-origin koja se koristi za prilagodbu položaja pozadinske slike prema rubu ispune.
• rubni okvir: Koristi se za postavljanje slike prema obrubu slike.
• okvir sadržaja: Koristi se za postavljanje pozadinske slike u skladu sa sadržajem slike.

Bilješka: Svojstvo background-origin ne radi ako je vrijednost svojstva background-attachment postavljena kao ' fiksni ”.

Primjer

Prvo napravite obrub oko spremnika. Ovdje ćemo nastaviti prethodni primjer i postaviti vrijednost ispune kao ' 10 px ”. Nakon toga prilagodite širinu obruba kao ' 15 px ', stil kao ' greben ', a boja kao ' rgb(1, 68, 68) ”. Na kraju ćemo dodijeliti vrijednost svojstva pozadinskog porijekla kao ' kutija sa sadržajem ”:

div {

...

podstava : 10 px ;

granica : 15 px greben rgb ( 1 , 68 , 68 ) ;

pozadina-podrijetlo : kutija sa sadržajem ;

}

Ishod gore navedenog koda dan je u nastavku. Možete vidjeti da je položaj slike postavljen prema sadržaju diva:

CSS svojstvo background-clip

' pozadinski isječak ” Svojstvo radi na boji pozadine elementa. Omogućuje vam da kontrolirate koliko se boja pozadine proteže izvan elementa, kao što je ispuna elementa, njegov obrub i njegov sadržaj.

Sintaksa

Sintaksa svojstva background-clip je:

pozadina-podrijetlo : rubni okvir | podstava-kutija | kutija sa sadržajem

Vrijednosti svojstva background-origin opisane su u nastavku:

• rubni okvir: To je zadana vrijednost svojstva background-origin koja se koristi za postavljanje boje pozadine iza obruba.
• padding-box: Koristi se za prilagodbu boje unutar okvira za podstavu elementa.
• okvir sadržaja: Koristi se za postavljanje boje pozadine prema sadržaju elementa.

Primjer

Nastavit ćemo prethodni primjer i promijeniti vrijednost stila obruba u ' točkasta ” da biste razumjeli svojstvo background-clip. Nakon toga ćemo postaviti vrijednost svojstva background-clip kao ' padding-box ”:

div {

...

pozadinski isječak : padding-box ;

}

Ispis označava da se bijela pozadinska boja pojavljuje kada rub ruba završi:

CSS svojstvo pozadinskog privitka

' pozadina-prilog ” Svojstvo se koristi za podešavanje ponašanja ili slike tijekom pomicanja po stranici. Njegovo ponašanje se može postaviti na pomicanje s drugim elementima ili popraviti.

Sintaksa

Sintaksa svojstva pozadinskog privitka je:

pozadina-prilog : vrijednost

Vrijednost pozadinskog privitka možete postaviti kao ' fiksni ” za popravak pozadinske slike ili “ svitak ” kako bi se slika pomicala sa stranicom.

Bilješka: Prema zadanim postavkama vrijednost svojstva pozadinskog privitka postavljena je na ' svitak ”.

Može se vidjeti da dodana pozadinska slika nije statična kada smo se pomicali. Riješimo sada ovaj problem.

Da bismo to učinili, postavili smo vrijednost svojstva background-attachment kao ' fiksni ”:

div {

...

pozadina-prilog : fiksni ;

}

Evo rezultata koji pokazuju da je slika popravljena:

Sada krenite prema usporedbi svojstava pozadine i boje pozadine.

CSS pozadina u odnosu na boju pozadine

Dana tablica će razlikovati svojstva pozadine i boje pozadine na temelju njihovih značajki:

Značajke	CSS pozadina	CSS boja pozadine
Tip	To je super nekretnina.	To je podsvojstvo pozadinskog svojstva.
Funkcionalnost	Postavlja sva svojstva pozadine.	Postavlja samo boju pozadine.
Raspon	Podržava sva svojstva pozadine	Podržava samo svojstvo boje pozadine
Razina	Kada trebate dodati više vrijednosti pozadine, to je jednostavno za korištenje. Možete postaviti vrijednosti svih svojstava pozadine odjednom.	Može se koristiti kada trebate dodati samo jednu boju pozadine.
Sintaksa	pozadina: vrijednosti (Vrijednosti su bg-color, bg-image i druga svojstva)	boja pozadine: boja

Objašnjeno je kako se svojstva boje pozadine razlikuju od svojstava pozadine.

Zaključak

CSS “ pozadina ” Svojstvo je skraćeno svojstvo koje se koristi za postavljanje više pozadinskih vrijednosti odjednom, kao što su boja, slika, položaj, veličina, porijeklo i više. S druge strane, ' boja pozadine ” koristi se samo za dodavanje boje pozadini. U ovom smo vodiču raspravljali o razlici između CSS svojstva pozadine i CSS svojstva boje pozadine.