Ang CSS ay isang akronim para sa Cascading Style Sheets. Ito ay isang simple ngunit malakas na wika ng disenyo na may kakayahang ibahin ang anyo ang mga web page. Sa simpleng mga termino, pinapabilis nito ang proseso ng paggawa ng mga web page na napapakita at nakakaakit sa mga gumagamit sa tulong ng . Sa artikulong ito, mauunawaan namin kung paano ipatupad ang iba't ibang larawan sa background sa CSS sa sumusunod na pagkakasunud-sunod:
- Larawan sa Background sa Mga Katangian ng CSS
- Larawan sa Background sa CSS
- Ulitin ang Background
- Attachment sa Background
- Posisyon sa Background
- Larawan sa Background sa Laki ng CSS
- Kulay ng background
Larawan sa Background sa Mga Katangian ng CSS
Maraming mga pag-aari na ginagamit upang makontrol ang mga pag-uugali at pagpoposisyon ng imahe. Ang mga katangiang ito ay:
- larawan sa background
- background-ulitin
- background-attachment
- background-posisyon
- sukat ng background
- kulay ng background
Kami ay pamilyar sa bawat isa sa mga pag-aari at makikita kung kailan at paano gamitin ang mga ito sa ilang mga kagiliw-giliw na pagpapakita.
Larawan sa Background sa CSS
random na klase sa halimbawa ng java
Ang larawan sa background ang pag-aari tulad ng ipinahihiwatig ng pangalan ay simpleng ginagamit upang ipahiwatig at itakda ang imahe sa background sa pamamagitan ng isang elemento sa isang web-page. Ang isang background-image bilang default ay inilalagay sa kaliwang sulok sa itaas ng isang elemento.
syntax: background-image: url | none | linear-gradient | radial-gradient
katawan {background-image: url ('apple.jpg')}background gamit ang url
Unawain natin ang mga parameter:
- url: Ang input sa parameter na ito ay nagbibigay-daan sa amin upang tukuyin ang alinman sa isang path ng file sa anumang imahe o ang URL sa imahe na kailangang itakda bilang isang background. Upang maipahayag ang higit sa isang imahe, ang mga Url ay pinaghihiwalay ng isang comma delimiter.
katawan {background-image: url ('apple.jpg')} 
- wala: Ito ang default na halaga ng pag-aari at walang imahe sa background ang naibigay kung ang halaga nito ay tinukoy.
katawan {background: wala}- linear-gradient (): Ang imahe ng background ay nakatakda sa isang linear gradient. Ang isang minimum na hindi bababa sa dalawang mga kulay ay kinakailangan upang matukoy para sa pag-aari na ito ie para sa itaas hanggang sa ibaba.
body {background-color: # 001 background-image: linear-gradient (puti 15%, transparent 16%), linear-gradient (puti 15%, transparent 16%) background-size: 60px 60px background-posisyon: 0 0, 30px 30px}- radial-gradient (): Ang imahe sa background ay nakatakda sa isang radial gradient. Ang isang minimum na hindi bababa sa dalawang mga kulay ay kinakailangan upang matukoy para sa pag-aari na ito ie para sa gitna hanggang sa mga gilid.
body {background-color: # 001 background-image: radial-gradient (puti 15%, transparent 16%), radial-gradient (puti 15%, transparent 16%) background-size: 60px 60px background-posisyon: 0 0, 30px 30px}- paulit-ulit na gradient (): Inuulit nito ang isang linear gradient. Gumamit tayo ng parehong halimbawa na nakita natin sa itaas sa linear gradient para sa paulit-ulit-gradient at makita ang pagkakaiba.
body {background-color: # 001 background-image: repeating-linear-gradient (puti 15%, transparent 16%), repeating-linear-gradient (puti 15%, transparent 16%) background-size: 60px 60px background-posisyon : 0 0, 30px 30px}- repeating-radial-gradient (): Inuulit nito ang isang radial gradient. Alamin natin ang parehong halimbawang ginamit namin sa itaas sa isang radial gradient.
body {background-color: # 001 background-image: repeating-radial-gradient (puti 15%, transparent 16%), repeating-radial-gradient (white 15%, transparent 16%) background-size: 60px 60px background-posisyon : 0 0, 30px 30px}Fallback Background
Palaging ipinapayo bilang isang propesyonal na tip upang magdagdag ng isang kulay sa background bilang isang pagpipilian ng fallback. Dumarating ito upang iligtas lalo na kapag ang alinman sa mga imahe sa background ay hindi naglo-load o ang gradient na background na itinakda namin habang ang pagbuo ay hindi suportado ng ilan sa mga lumang browser na ito ay tiningnan.
Hindi nito nasisira ang karanasan ng gumagamit at maaaring ideklarang ganito:
katawan {background: url (apple_lost.jpg) pink}Maramihang Background
Mayroon din kaming pagpipilian upang magtakda ng maraming mga imahe sa background at kinakailangan ito sa karamihan ng mga kaso tulad ng isang harapan at imaheng background. Ang pagkakasunud-sunod ng imahe ay mahalaga dito, ang imaheng dapat ay nasa harap ay idineklara muna, at ang imaheng dapat ay nasa likurang hulihan ay idineklara sa susunod.
Nasa ibaba ang halimbawa para sa maraming mga imahe sa background:
body {background-image: url ('maliit-puso.jpg'), url ('background.jpg')}Ulitin ang Background
Ginagamit ang background-ulit na pag-aari kasama ang background-image upang tukuyin ang umuulit na pag-uugali ng isang imahe. Tinutukoy nito kung at paano uulitin ang isang imahe sa background. Ang background-image bilang default ay paulit-ulit na parehong patayo at pahalang.
Ang mga posibleng halaga ay:
- ulitin- Ang imahe ay umuulit sa parehong pahalang at patayo
- walang ulit - Ang imahe ay hindi umuulit
- ulitin-x - Ang imahe ay paulit-ulit na pahalang
- ulitin-y - Ang imahe ay paulit-ulit na patayo
- space- Ang imahe ay paulit-ulit na may kahit puwang o puwang sa pagitan.
- bilog - Ang imahe ay paulit-ulit upang punan ang lugar nang walang anumang mga puwang sa pagitan nila.
Ang CSS syntax para sa background-ulit na pag-aari ay:
ulitin ang background: ulitin | ulitin-x | ulitin-y | hindi-ulitin | puwang | bilog
body {background-image: url ('heart.png'), url ('background.png') background-ulit: ulitin-y, ulitin-x background-kulay: #ffffff}Attachment sa Background
Ang background-attachment ang pag-aari ay ginagamit kasama ang background-image upang sabihin kung dapat o hindi ang imahe ay dapat mag-scroll habang ang nilalaman ay na-scroll. Ito ay nangangahulugan na ang larawan sa background ay dapat na maayos o dapat mag-scroll kasama ang dokumento na may kaugnayan sa view ng window ng browser. Ang default na halaga ay upang mag-scroll.
kung paano lumikha ng mga log file sa java
Ang mga posibleng halaga ay:
- mag-scroll - Nag-scroll ang imahe kasama ang pahina.
- naayos - Ang imahe ay hindi mag-scroll kasama ang pahina
Ang CSS syntax para sa background-attachment ay:
background-attachment: mag-scroll | maayos
body {background-image: url ('heart.png'), url ('background.png') background-ulitin: puwang, bilog}Posisyon sa Background
Ang background-posisyon ang pag-aari ay ginagamit upang ipahiwatig ang lokasyon o pagpoposisyon ng isang background na imahe. Ang mga posibleng halaga ay:
- tuktok
- tama
- ilalim
- umalis na
- gitna
- kumbinasyon ng mga halagang ito (hal., kaliwang tuktok)
Ang CSS syntax para sa background-posisyon ay:
posisyon sa background: itaas | kanan | kaliwa | ilalim | gitna
body {background-image: url ('heart.png') background-ulit: no-ulit na background-attachment: scroll}klase __init__ python
Larawan sa Background sa Laki ng CSS
Ang pag-aari na ito ay isa sa pinaka kapaki-pakinabang dahil pinapayagan kaming kontrolin ang laki ng imahe sa background. Mayroong iba't ibang mga kumbinasyon na maaari naming gamitin sa pag-aari na ito at makakuha ng mga resulta nang naaayon. Ang default na halaga ay awtomatiko.
Ang mga sumusunod na halaga ay maaaring magamit sa laki ng background:
- awtomatiko
- isang haba- taas at lapad ng imahe hal. 20px 40px.
- isang porsyento- taas at lapad ng imahe bilang isang porsyento w.r.t elemento ng magulang hal. 50% 50%.
- gitna- I-align ang imahe sa gitna
- takpan, pag-scale ng imahe upang ganap na masakop ng background area.
- maglaman, pag-scale ng imahe upang magkasya hanggang sa aktwal na taas at lapad nito.
Ang CSS syntax para sa background-posisyon ay:
laki ng background: halaga
body {background-image: url ('heart.png'), url ('background.png') background-ulit: walang ulit, ulitin ang laki ng background: 400px 150px, takip}body {background-image: url ('heart.png'), url ('background.png') background-ulit: no-ulit, ulitin ang laki ng background: maglaman, 400px 150px}Kulay ng background
Nalalapat ito ang pinakasimpleng ng lahat ng mga pag-aari sa CSS. Nalalapat nito ang mga solidong kulay sa background ng pahina. Ang halaga para sa pag-aari na ito ay maaaring tukuyin sa mga kulay (hal. Pula, asul, atbp), hex na halaga at halagang RGB.
Ang CSS syntax para sa background-color ay:
kulay ng background: halaga
body {background-image: url (maliit-puso.jpg) background-color: # 22a8e3}Tinatapos nito ang lahat ng mga pag-aari na maaari naming magamit sa background. Maaari naming laging subukan ang iba't ibang mga kumbinasyon ng mga pag-aari tulad ng nakita namin sa aming pagpapakita.
Mahalaga ang CSS at dapat kumuha ng mga kasanayan para sa bawat front-end na web developer. Nakakatulong ito habang nagdidisenyo at nagtatampok ng background at upang bumuo ng mga kahanga-hangang website at pagyamanin ang karanasan ng gumagamit. Ang pinakamahusay na ay panatilihin ang pag-eksperimento at samantalahin ang espesyal na teknolohiyang pang-harap na ito dahil makakagawa ito ng mga kababalaghan at pabago-bagong ibahin ang pahina.
Suriin ang aming na kasama ng live na pagsasanay na pinamunuan ng magtuturo at karanasan sa proyekto sa totoong buhay. Ang pagsasanay na ito ay gumagawa sa iyo ng kasanayan sa mga kasanayan upang gumana sa back-end at front-end na mga teknolohiya sa web. Kabilang dito ang pagsasanay sa Pag-unlad sa Web, jQuery, Angular, NodeJS, ExpressJS, at MongoDB.
May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng blog na 'Larawan sa background sa CSS' at babalikan ka namin.