Narito kung paano magdagdag ng mga tumutugon mga imaheng disenyo gamit ang CSS
Tumingin sa mga sikat na website ngayon at isang disenyo ng paggamot na sigurado mong makita ay malaki, screen-spanning mga larawan sa background. Ang isa sa mga hamon sa pagdaragdag ng mga larawang ito ay mula sa pinakamahusay na kasanayan na dapat tumugon ang mga website sa iba't ibang laki ng screen at device - isang diskarte na kilala bilang tumutugon sa web design .
Dahil ang mga pagbabago at mga antas ng layout ng iyong website ay may iba't ibang mga laki ng screen, kaya dapat din itong sukat ng mga larawan sa background.
Sa katunayan, ang mga "likidong imahe" na ito ay isa sa mga pangunahing bahagi ng mga tumutugon na mga website (kasama ang isang fluid grid at mga query ng media). Ang mga tatlong piraso ay naging isang sangkap na hilaw ng tumutugon sa disenyo ng web simula pa sa simula, ngunit habang palaging ito ay medyo madali upang magdagdag ng tumutugon mga inline na imahe sa isang site (ang mga inline na imahe ay ang mga graphics na naka-code bilang bahagi ng HTML markup), ginagawa ang parehong may mga larawan sa background (na naka-istilong sa pahina gamit ang mga katangian ng CSS background) ay matagal na nagbigay ng isang makabuluhang hamon sa maraming mga web designer at front end developer. Sa kabutihang palad, ang pagdaragdag ng "background-size" na ari-arian sa CSS ay ginawa ito posible.
Sa isang magkahiwalay na artikulo, tinakpan ko kung paano gamitin ang laki ng background ng property ng CSS3 upang mahatak ang mga larawan upang umangkop sa isang window, ngunit may mas mahusay, mas kapaki-pakinabang na paraan upang maipakita ang property na ito. Upang gawin ito, gagamitin namin ang sumusunod na kumbinasyon ng property at halaga:
background-size: cover;
Ang pabalat ng keyword property ay nagsasabi sa browser na i-scale ang imahe upang umangkop sa window, hindi alintana kung gaano kalaki o maliit ang nakakakuha ng window. Ang imahe ay naka-scale upang masakop ang buong screen, ngunit ang orihinal na sukat at aspeto ng ratio ay pinananatiling buo, na pumipigil sa imahe mismo mula sa pagbaluktot.
Ang imahe ay inilalagay sa window bilang malaki hangga't maaari upang ang buong ibabaw ng window ay sakop. Nangangahulugan ito na wala kang anumang mga blangko na puwang sa iyong pahina o anumang pagbaluktot sa larawan, ngunit nangangahulugan din ito na ang ilan sa mga imahe ay maaaring mai-trim off depende sa aspect ratio ng screen at ang imahe na pinag-uusapan. Halimbawa, ang mga gilid ng isang imahe (alinman sa itaas, ibaba, kaliwa, o kanan) ay maaaring putulin sa mga imahe, depende sa kung aling mga halaga ang iyong ginagamit para sa property na posisyon sa background. Kung iniuugnay mo ang background sa "itaas na kaliwang", anumang labis sa larawan ay darating mula sa ibaba at kanang panig. Kung nakalagay mo ang larawan sa background, ang labis ay darating mula sa lahat ng panig, ngunit dahil ang labis na ito ay kumalat, ang epekto sa anumang bahagi ay mas mababa ang paglilingkod.
Paano Gamitin ang laki ng background: takip;
Kapag lumilikha ng iyong larawan sa background, magandang ideya na lumikha ng isang imahe na medyo malaki. Habang ang mga browser ay maaaring gumawa ng isang imahe na mas maliit na walang isang kapansin-pansin na epekto sa visual na kalidad, kapag ang isang browser scale up ng isang imahe sa isang sukat na mas malaki kaysa ito ay orihinal na sukat, ang visual na kalidad ay nagpapasama, nagiging malabo at pixelated. Ang downside sa mga ito ay ang iyong pahina ay tumatagal ng isang pagganap hit kapag ikaw ay naghahatid ng higanteng mga imahe sa lahat ng mga screen.
Kapag ginawa mo ito, tiyaking maayos na ihanda ang mga imaheng iyon para sa bilis ng pag-download at paghahatid ng web . Sa katapusan, kailangan mong mahanap ang maligaya daluyan sa pagitan ng isang malaking sapat na laki ng imahe at kalidad at isang makatwirang laki ng file para sa mga bilis ng pag-download.
Ang isa sa mga karaniwang paraan upang magamit ang mga larawan sa scaling background ay kapag nais mo ang larawang iyon upang makuha ang buong background ng isang pahina, kung ang pahina ay malawak at tiningnan sa isang desktop computer o mas maliit at ipinapadala sa isang handheld, mobile mga aparato.
I-upload ang iyong larawan sa iyong web host at idagdag ito sa iyong CSS bilang isang larawan sa background:
background-image: url (fireworks-over-wdw.jpg);
Ulit-ulitin: walang-ulitin;
background-position: center center;
background-attachment: naayos;
Idagdag muna ang prefix na browser ng CSS:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Pagkatapos ay idagdag ang property ng CSS:
background-size: cover;
Paggamit ng Iba't ibang mga Imahe Na Suit Iba't ibang Mga Aparato
Habang ang nakikiramay na disenyo para sa isang desktop o isang karanasan sa laptop ay mahalaga, ang iba't ibang mga device na maaaring ma-access ang Web ay lumago nang malaki, at ang isang mas malawak na iba't ibang laki ng screen ay may ganoon.
Tulad ng nabanggit na dati, ang paglo-load ng isang napakalaking tumutugon na larawan sa background sa isang smartphone, halimbawa, ay hindi isang mahusay o bandwidth na nakakamalay na disenyo.
Alamin kung paano mo magagamit ang mga query sa media upang maghatid ng mga larawan na naaangkop sa mga device na ipapakita sa kanila, at higit pang pagbutihin ang pagiging tugma ng iyong website sa mga mobile device.
Orihinal na artikulo ni Jennfier Krynin. Na-edit ni Jeremy Girard 9/12/17