Ang ' mga sprite ng imahe ” ay isang pamamaraan kung saan nilikha ang isang malaking larawan na binubuo ng maramihang iisang larawan. At anumang bahagi ng malaking imahe ay maaaring ipakita na may kaugnayan sa mga kinakailangan sa disenyo. Tinutulungan nito ang mga developer na bumuo ng mga elementong nakakaakit sa paningin nang maayos. Maaaring gamitin ang mga image sprite para sa mga icon, button, at iba pang mga graphical na elemento. Ipinapakita ng artikulong ito ang sunud-sunod na pamamaraan ng paggamit ng mga sprite ng larawan sa CSS.
Paano Gamitin ang I Mage Sprites sa CSS?
Sa CSS, ginagamit ng mga developer ang mga image sprite para mabawasan/bawasan ang oras ng paglo-load ng isang webpage. Nakakatulong ito sa pagbabawas ng mga kahilingan sa HTTP, tinitiyak ang mas mabilis na paglo-load, at pinapabuti ang kadahilanan ng karanasan ng user. Halimbawa, bisitahin ang halimbawa sa ibaba:
Halimbawa: Paggamit ng Image Sprite sa List Item
Sa halimbawang ito, isang nakaayos na listahan ang ginawa at sa bawat item sa listahan, ang bahagi ng sprite na imahe ay ipinapakita sa screen.
Kinakailangan:
Para makuha ang partikular na larawan mula sa image sprite, ang mga sukat ng image sprite na ginagamit ay partikular na mahalaga. Halimbawa, ang larawang may sukat na ' 937×156 ” ay ipinapakita sa ibaba:
Sundin ang mga hakbang sa ibaba upang ipakita ang ilang bahagi ng ipinapakitang larawan sa itaas:
Hakbang 1: Paglikha ng Mga Item sa Listahan
Ang hindi nakaayos na listahan ay nabuo sa webpage, tulad ng nakikita sa ibaba ng snippet ng code:
< ul >Walang laman: < na id = 'walang laman' > na >
kalahati: < na id = 'kalahati' > na >
Puno: < na id = 'puno' > na >
ul >
Ang paglalarawan ng snippet ng code sa itaas:
-
- Una, gamitin ang '
” tag. - Susunod, italaga ang mga id ng ' walang laman ”, “ kalahati 'at' puno na ” para sa tatlong item sa listahan. Ang mga ito ay ginagamit sa ibang pagkakataon upang ipakita ang bahagi ng mas malaking larawan.
- Una, gamitin ang '
Hakbang 2: Pagpapakita ng Unang Larawan
Upang ipakita ang walang laman na puso sa web page na siyang unang larawan sa sprite ng larawan. Gamitin ang ' walang laman ” id at ipasok ang sumusunod na code:
#empty {lapad: 157px;
taas: 150px;
background: url ( .. / sprite.jpg ) 0 0 ;
}
Sa itaas na linya ng mga code:
-
- Una, itakda ang ' lapad 'at' taas ” ng larawang gustong ipakita ng developer sa web page.
- Ang mga katangiang ito ay itinalaga sa mga halaga ng ' 157px 'at' 150px ” ayon sa halimbawang ibinigay sa itaas, ngunit maaaring mag-iba ang mga ito kaugnay ng mga larawang may iba't ibang dimensyon.
- Susunod, ibigay ang landas ng ' engkanto 'larawan sa ' background ” ari-arian. Ngayon, itakda ang direksyon ng ' 0 'at' 0 ” at ipinapakita nito ang unang bahagi ng sprite ng imahe.
Pagkatapos ng pagpapatupad ng linya ng code sa itaas, ang webpage ay ganito ang hitsura:
Ang snapshot sa itaas ay nagpapakita na ang unang larawan mula sa image sprite ay ipinapakita sa webpage.
Hakbang 3: Pagpapakita ng Gitna at Huling Larawan
Para sa pagpapakita ng gitna at huling bahagi ng imahe mula sa sprite ng imahe, ipasok ang mga sumusunod na katangian ng CSS:
#kalahati {lapad: 157px;
taas: 150px;
background: url ( .. / sprite.jpg ) -462px 0px
}
#full {
lapad: 157px;
taas: 150px;
background: url ( .. / sprite.jpg ) -770px 0px
}
Ang paglalarawan ng snippet ng code sa itaas:
-
- Una, piliin ang ' kalahati ” id at ipasok ang parehong mga katangian ng CSS na ginagamit sa hakbang sa itaas.
- Upang ipakita ang gitnang larawan mula sa sprite ng imahe, baguhin ang direksyon o magtalaga ng padding mula sa kaliwang bahagi. Halimbawa, ang direksyon mula sa kaliwa ay nakatakda sa ' negatibong 462px ”.
- Sa parehong paraan, ipakita ang huling larawan sa pamamagitan ng pagtatakda ng direksyon mula sa kaliwa patungo sa ' -770px ”.
Pagkatapos ng pagpapatupad ng mga katangian ng CSS sa itaas, ang webpage ay lilitaw na ganito:
Ang snapshot sa itaas ay nagpapakita na ang tatlong larawan mula sa image sprite ay ipinakita sa webpage.
Konklusyon
Ang ' mga sprite ng imahe ” ay isang solong malaking larawan na binubuo ng maraming mas maliliit na larawan tulad ng tampok na collage. At anumang bahagi ng malaking larawan na kumakatawan sa isang mas maliit na larawan ay maaaring ipakita. Ayon sa mga kinakailangan gamit ang ' background ” property na ibinigay ng CSS. Upang ipakita ang partikular na larawan mula sa image sprite, itakda muna ang lapad at taas ng larawan. Pagkatapos nito, gamitin ang mga halaga ng direksyon upang ipakita lamang ang bahagi ng imahe mula sa sprite ng imahe.