CSS background vs background-color

tag at pagkatapos ay magdagdag ng heading at paragraph.

HTML

< div >

< h1 > LinuxHint < / h1 >

< p > Maligayang pagdating sa aming website < / p >

< / div >

Sa CSS, isasaayos namin ang taas ng div bilang ' 100% ” upang ipakita ito sa buong pahina at laki ng font ng teksto bilang “ xx-malaki ”. Pagkatapos nito, itakda ang kulay ng background bilang ' aqua ”.

CSS

div {

taas : 100% ;

laki ng font : xx-malaki ;

kulay ng background : aqua ;

}

Sa larawang ibinigay sa ibaba, makikita mong inilapat ang kulay ng background:

CSS background-image Property

Ang ' background-image Ang ” property ay ginagamit upang itakda ang isa o higit pang mga larawan bilang background ng mga elemento ng HTML. Maaari mong gamitin ang property na ito upang magdagdag ng iba't ibang larawan sa background para sa iba't ibang elemento.

Syntax

Ang syntax ng background-image property ay:

background-image: url()

Dito, ibigay ang landas ng imaheng gusto mong itakda bilang background bilang argumento sa “ url() ”.

Halimbawa

Sa pagpapatuloy ng nakaraang halimbawa, magdagdag ng larawan sa background sa “ div ” klase. Idaragdag namin ang url ng larawan bilang “ url(img.jpg) ”:

div {

...

background-image : url ( img.jpg ) ;

}

Ang output na ibinigay sa ibaba ay nagpapahiwatig na ang larawan sa background ay matagumpay na naidagdag:

Tandaan na ang imahe ay paulit-ulit. Para malutas ang isyung ito, tingnan ang susunod na property.

CSS background-repeat Property

Kapag nagdagdag ka ng larawan bilang background sa isang web page, mauulit ito bilang default. Upang maiwasan ang pag-uulit na ito at itakda ang pattern ayon sa iyong pinili, ang ' background-repeat ” ang ari-arian ay ginagamit.

Syntax

Ang syntax ng background-repeat property ay:

background-repeat : ulitin | ulitin-x | ulitin-y | no-repeat

Ang paglalarawan ng mga nakasaad na halaga ng background-repeat property ay ibinigay sa ibaba:

• ulitin: Ito ay ginagamit upang ulitin ang imahe sa parehong direksyon, patayo at pahalang.
• ulitin-x: Ito ay ginagamit upang itakda ang pag-uulit ng larawan nang pahalang lamang.
• ulitin-y: Tinutukoy nito ang patayong pag-uulit ng imahe.
• hindi nauulit: Ito ay ginagamit upang maiwasan ang pag-uulit ng larawan.

Halimbawa

Dito, itatakda namin ang halaga ng background-repeat property bilang “ no-repeat ”:

div {

...

background-repeat : no-repeat ;

}

Ang kinalabasan ng ibinigay na code sa itaas ay ibinibigay sa ibaba. Makikita mong hindi na nauulit ang larawan:

CSS background-position Property

Upang itakda ang posisyon ng larawan sa background, ang ' background-posisyon ” gamit ang ari-arian. Pinapayagan ka nitong ayusin ang imahe sa iba't ibang mga posisyon tulad ng kaliwang itaas, kaliwang gitna, kaliwang ibaba, kanang itaas, kanang gitna, at marami pa.

Syntax

Ang syntax ng background-position property ay:

background-posisyon : halaga

Sa lugar ng ' halaga ”, maaari mong tukuyin ang posisyon ng larawan.

Halimbawa

Dito, itatakda namin ang background-position bilang ' gitna ”:

div {

...

background-posisyon : gitna ;

}

Sa output sa ibaba, lumilitaw ang larawan sa gitna ng pahina:

CSS background-size na Property

Upang maitakda ang laki ng larawan sa background, ang ' laki ng background ” gamit ang ari-arian.

Syntax

Ang laki ng background ay may sumusunod na syntax:

laki ng background : haba|takip

Ang sumusunod ay ang paglalarawan ng mga halaga ng background-size na property:

• haba: Ito ay ginagamit upang ayusin ang lapad at taas ng larawan sa background.
• pabalat: Ito ay ginagamit upang ayusin ang background na imahe sa buong background.

Halimbawa

Itatakda namin ang laki ng background bilang ' 100% 'taas at' 80% 'lapad:

div {

...

laki ng background : 100% 80% ;

}

Maaari mong makita na ang imahe ay binago ang laki batay sa tinukoy na mga sukat:

CSS background-origin Property

Ang ' background-origin ” Ang ari-arian ay ginagamit upang ayusin ang lugar ng pagpoposisyon ng larawan sa background. Ang larawan ay inaayos sa kaliwang sulok sa itaas bilang default.

Syntax

Ang syntax ng background-origin property ay:

background-origin : padding-box| hangganan-kahon | nilalaman-kahon

Ang mga halaga ng background-origin property ay inilarawan sa ibaba:

• padding-box: Ito ang default na halaga ng background-origin property na ginamit upang ayusin ang posisyon ng background na larawan ayon sa padding edge.
• border-box: Ito ay ginagamit upang itakda ang imahe ayon sa border-box ng larawan.
• kahon ng nilalaman: Ito ay ginagamit upang itakda ang background na imahe alinsunod sa nilalaman ng imahe.

Tandaan: Hindi gagana ang background-origin property kung ang value ng background-attachment property ay nakatakda bilang “ nakapirming ”.

Halimbawa

Una, gumawa ng hangganan sa paligid ng lalagyan. Dito, ipagpapatuloy namin ang nakaraang halimbawa at itatakda ang halaga ng padding bilang ' 10px ”. Pagkatapos nito, ayusin ang lapad ng hangganan bilang ' 15px ”, istilo bilang “ tagaytay ”, at kulayan bilang “ rgb(1, 68, 68) ”. Sa huli, itatalaga namin ang halaga ng background-origin property bilang ' nilalaman-kahon ”:

div {

...

padding : 10px ;

hangganan : 15px tagaytay rgb ( 1 , 68 , 68 ) ;

background-origin : nilalaman-kahon ;

}

Ang kinalabasan ng ibinigay na code sa itaas ay ibinibigay sa ibaba. Maaari mong makita na ang posisyon ng imahe ay nakatakda ayon sa nilalaman ng div:

CSS background-clip Property

Ang ' background-clip ” gumagana ang property sa kulay ng background ng elemento. Hinahayaan ka nitong kontrolin kung gaano kalayo ang isang kulay ng background na lumalampas sa isang elemento, tulad ng padding ng elemento, hangganan nito, at nilalaman nito.

Syntax

Ang syntax ng background-clip property ay:

background-origin : hangganan-kahon | padding-box | nilalaman-kahon

Ang mga halaga ng background-origin property ay inilarawan sa ibaba:

• border-box: Ito ang default na halaga ng background-origin property na ginamit upang itakda ang kulay ng background sa likod ng hangganan.
• padding-box: Ito ay ginagamit upang ayusin ang kulay sa loob ng padding box ng elemento.
• kahon ng nilalaman: Ito ay ginagamit upang itakda ang kulay ng background ayon sa nilalaman ng elemento.

Halimbawa

Ipagpapatuloy namin ang nakaraang halimbawa at babaguhin ang halaga ng istilo ng hangganan sa ' may tuldok ” para maunawaan ang background-clip property. Pagkatapos nito, itatakda namin ang halaga ng background-clip property bilang “ padding-box ”:

div {

...

background-clip : padding-box ;

}

Ang output ay nagpapahiwatig na ang puting kulay ng background ay lumalabas kapag natapos ang gilid ng hangganan:

CSS background-attachment Property

Ang ' background-attachment ” Ang ari-arian ay ginagamit upang ayusin ang gawi o ang imahe habang nag-i-scroll sa pahina. Ang pag-uugali nito ay maaaring itakda sa pag-scroll sa iba pang mga elemento o naayos.

Syntax

Ang syntax ng background-attachment property ay:

background-attachment : halaga

Maaari mong itakda ang halaga ng background-attachment bilang ' nakapirming ' para ayusin ang background na larawan o ' mag-scroll ” upang payagan ang larawan na mag-scroll kasama ng pahina.

Tandaan: Bilang default, ang halaga ng background-attachment property ay itinakda bilang “ mag-scroll ”.

Makikita na hindi static ang idinagdag na background image kapag nag-scroll na tayo. Ngayon ayusin natin ang isyung ito.

Upang gawin ito, itinakda namin ang halaga ng background-attachment property bilang “ nakapirming ”:

div {

...

background-attachment : nakapirming ;

}

Narito ang resulta na nagpapakita na ang imahe ay naayos na:

Ngayon, tumungo sa paghahambing sa pagitan ng background at background-color na mga katangian.

CSS background vs background-color

Ang ibinigay na talahanayan ay mag-iiba sa background at background-kulay na mga katangian sa batayan ng kanilang mga tampok:

Mga tampok	Background ng CSS	Kulay ng background ng CSS
Uri	Ito ay isang super property.	Ito ay isang sub-property ng background property.
Pag-andar	Itinatakda nito ang lahat ng katangian ng background.	Itinatakda lamang nito ang kulay ng background.
Saklaw	Sinusuportahan nito ang lahat ng mga katangian ng background	Sinusuportahan lamang nito ang pag-aari ng kulay ng background
Antas	Kapag kailangan mong magdagdag ng maramihang mga halaga ng background, ito ay madaling gamitin. Maaari mong itakda ang mga halaga ng lahat ng mga katangian ng background nang sabay-sabay.	Maaari itong magamit kapag kailangan mo lamang magdagdag ng isang kulay ng background.
Syntax	background: mga halaga (Ang mga halaga ay bg-color, bg-image, at iba pang mga katangian)	kulay ng background: kulay

Ipinaliwanag kung paano naiiba ang mga katangian ng kulay ng background sa mga katangian ng background.

Konklusyon

CSS ' background Ang ” property ay isang shorthand property na ginagamit upang magtakda ng maraming mga value ng background nang sabay-sabay, gaya ng kulay, larawan, posisyon, laki, pinanggalingan, at higit pa. Sa kabilang kamay, ' kulay ng background Ang ” ay ginagamit lamang upang magdagdag ng kulay sa background. Sa gabay na ito, tinalakay namin ang pagkakaiba sa pagitan ng CSS background property at CSS background-color property.