Ipapakita ng gabay sa pag-aaral na ito kung paano gumamit ng mga larawan sa background gamit ang CSS. Kaya, magsimula tayo!
Paano Gamitin ang Maramihang Mga Larawan sa Background Gamit ang CSS?
Ang CSS ' background Ang ” property ay isang shorthand property na naglalaman ng background, background-attachment, clip, larawan, repeat, origin, size, at position properties. Maaaring gamitin ang background property para sa pagtukoy ng mga URL ng maraming larawan. Ang mga larawang iyon ay nakaposisyon at nakatakda nang naaayon.
Kumuha tayo ng isang halimbawa kung saan ang isang elemento ng div ay naglalaman lamang ng isang larawan bilang logo ng web page habang ang pangalawa ay naglalaman ng tatlong larawan.
Halimbawa: Pagdaragdag ng Maramihang Mga Larawan sa Background Gamit ang CSS
Sa HTML, magdagdag ng div element para sa logo at tukuyin ang pangalan ng klase. Halimbawa, pinangalanan namin itong ' logo ”. Gumagamit ang pangalawang div ng maraming larawan, kaya pinangalanan namin itong ' maramihang-imahe ”. Gayunpaman, maaari mong tukuyin ang pangalan ng klase ayon sa iyong mga kagustuhan.
HTML
< div klase = 'logo' >< / div >< div klase = 'maramihang larawan' >< / div >
Sa susunod na seksyon, aayusin namin ang mga larawan gamit ang CSS background property.
Estilo 'logo' div
.logo {lapad : 100% ;
taas : 50px ;
padding : 5px ;
margin : 5px ;
laki ng background : 100px ;
background-repeat : no-repeat ;
background-image : url ( images/linux-logo.png ) ;
}
Ang elemento ng div na may klase na ' logo ' ay inilapat sa mga sumusunod na katangian:
- “ lapad 'Ang pag-aari ay ginagamit para sa pagtatakda ng lapad ng elemento sa ' 100% ”.
- “ taas Ang ” property ay ginagamit para sa pagtatakda ng taas ng elemento sa “ 50px ”.
- “ padding 'Ang ari-arian ay ginagamit para sa pagtatakda ng ' 5px ” puwang sa paligid ng tinukoy na nilalaman ng elemento.
- “ margin 'Ang ari-arian ay ginagamit para sa pagtatakda ng ' 5px ” puwang sa paligid ng elemento.
- “ laki ng background Itinatakda ng ' property ang laki ng larawan sa background ng elemento bilang ' 100px ”.
- “ background-repeat 'na may halaga' no-repeat ” isang beses lang ipinapakita ang background.
- “ background-image Ang ” property ay ginagamit para sa pagtukoy ng URL ng larawan.
Istilo ang 'multiple-images' div
.multiple-images {lapad : 90% ;
taas : 45vh ;
margin : 1px sasakyan ;
padding : 20px ;
laki ng background : 150px ;
kulay ng background : rgb ( 157 , 154 , 151 ) ;
background-image : url ( images/office.png ) , url ( images/html.png ) , url ( images/laptop.png ) ;
background-repeat : no-repeat , no-repeat , no-repeat ;
background-posisyon : umalis , gitna , tama ;
}
Ngayon, i-istilo ang ibang lalagyan gaya ng sumusunod:
- “ kulay ng background ” property ay tumutukoy sa kulay ng background ng elemento.
- “ background-image Tinutukoy ng ” property ang maraming URL ng larawan.
- “ background-repeat Ang ” property ay nagtatakda ng mga halaga para sa mga imahe sa isang pagkakasunod-sunod ng mga larawang tinukoy sa background-image property. Ang parehong mga imahe ay nakatakda bilang hindi umuulit na nangangahulugan na ang mga ito ay ipapakita sa browser nang isang beses lamang.
- “ background-posisyon ' inaayos ang posisyon ng imahe sa pagkakasunud-sunod ng mga imahe na tinukoy ng background-image property. Ang unang larawan ay itatakda sa kaliwang bahagi, ang pangalawa sa gitna at ang pangatlo ay ilalagay sa kanang bahagi.
Sa pamamagitan ng pagbibigay ng code na ibinigay sa itaas, ang resulta sa browser ay magiging ganito:
Sa ganitong paraan, maaari nating ayusin ang posisyon ng maraming larawan gamit ang CSS.
Konklusyon
Upang gawing nakakaaliw at interactive ang application, gumagamit ang mga developer ng iba't ibang larawan at kulay. Maaari kaming magtakda ng maramihang mga larawan na may mga katangian ng background ng CSS, tulad ng background-position, background-repeat, background-size, at higit pa. Ang manwal na ito ay nagpakita ng paggamit ng maraming mga larawan sa background na may mga halimbawa ng CSS.