Ania kon unsaon sa pagdugang sa responsive nga mga hulagway nga gamit ang CSS
Tan-awa ang popular nga mga website karon ug ang usa ka disenyo nga pagtambal nga sigurado ka nga makita mao ang dako, screen-nga naglangkob sa mga hulagway sa background. Usa sa mga hagit sa pagdugang niini nga mga hulagway naggikan sa labing maayo nga praktis nga ang mga website kinahanglan gayud nga motubag sa lain-laing mga gidak-on sa screen ug mga himan - usa ka pamaagi nga gitawag nga responsive web design .
Tungod kay ang pagbag-o sa layout sa imong website ug mga timbangan nga may lain-laing mga gidak-on sa screen, kinahanglan usab nga kini nga mga hulagway sa background mag-igo sa ilang gidak-on sumala niana.
Sa pagkatinuod, kining "mga hulagway sa likido" usa sa mga mahinungdanong bahin sa mga websayt nga responsibilidad (uban sa usa ka fluid grid ug media queries). Kadtong tulo nga mga piraso nahimong usa ka sumbanan sa responsive web design sukad pa sa sinugdanan, apan bisan kini kanunay nga sayon nga makadugang sa mga responsive inline nga mga hulagway ngadto sa usa ka site (ang inline nga mga hulagway mao ang mga hulagway nga gisulat ingon nga bahin sa HTML markup), nga nagbuhat sa sama sa mga hulagway sa background (nga gihulagway ngadto sa panid gamit ang CSS background properties) dugay nga naghatag og usa ka mahinungdanong hagit ngadto sa daghang mga tigdisenyo sa web ug sa mga naghimo sa atubangan sa katapusan. Maayo na lang, ang pagdugang sa "background-size" nga propiedad sa CSS nakahimo niini nga posible.
Sa usa ka lahi nga artikulo, gihan-ay nako kon unsaon paggamit ang CSS3 property-size nga bahin sa pag-igo sa mga imahen aron mohaum sa usa ka bintana, apan adunay mas maayo, mas mapuslanon nga paagi sa pagdeploy niini nga propiedad. Sa pagbuhat niini, atong gamiton ang mosunod nga kombinasyon sa kabtangan:
pananglitan-gidak-on: tabon;
Ang tag-iya sa hugpong sa keyword nagsulti sa browser nga gipadako ang hulagway aron mahaum sa bintana, bisan unsa ka dako o gamay ang bintana nga makuha. Ang hulagway gipalapad aron sa pagtabon sa tibuok nga screen, apan ang orihinal nga proporsyon ug aspeto nga bahin gihuptan nga dili husto, nga nagpugong sa imahe nga dili matuis.
Ang imahen gibutang sa bintana nga dako kutob sa mahimo aron ang tibuok nawong sa bintana tabonan. Kini nagpasabot nga wala ka'y blangko nga mga spots sa imong panid o bisan unsang pagtuis sa imahe, apan kini nagpasabot usab nga ang pipila sa mga larawan mahimong maputol depende sa aspect ratio sa screen ug ang hulagway nga pangutana. Pananglitan, ang mga kilid sa usa ka imahen (sa ibabaw, sa ubos, sa wala, o sa tuo) mahimo nga maputol sa mga larawan, depende sa mga hiyas nga imong gigamit alang sa property nga posisyon sa background. Kon ipunting nimo ang background sa "ibabaw nga wala", ang bisan unsa nga sobra sa hulagway moabut gikan sa ubos ug tuo nga mga kilid. Kon ikaw nakasentro sa hulagway sa likod, ang sobra mogawas sa tanan nga mga kilid, apan tungod kay ang sobra nga gibug-aton, ang epekto sa usa ka bahin dili kaayo mag-alagad.
Unsaon Paggamit sa background-size: cover;
Sa paghimo sa imong background nga imahe, maayo nga ideya sa paghimo sa usa ka imahen nga dako kaayo. Samtang ang mga browser makahimo sa usa ka imahe nga mas gamay nga walay usa ka mamatikdan nga epekto sa visual nga kalidad, sa diha nga ang usa ka browser magatimbang sa usa ka larawan ngadto sa usa ka gidak-on nga mas dako pa kay sa orihinal nga mga sukod, ang visual nga kalidad mahimong degradado, nga mahimong malaw-ay ug pixelated. Ang kalisud niini mao nga ang imong panid nagkinahanglan sa usa ka pasundayag nga nahimo sa dihang ikaw naghatag higanteng mga larawan ngadto sa tanan nga mga talan-awon.
Kon buhaton nimo kini, siguroha nga husto ang pag-andam sa mga hulagway alang sa gikusgon nga download ug web delivery . Sa katapusan, kinahanglan nimo nga makit-an ang malipayon nga medium tali sa usa ka dako nga igo nga gidak-on ug kalidad nga imahe ug usa ka sukaranan nga sukaranan nga file alang sa mga gikusgon nga pag-download.
Usa sa komon nga mga paagi sa paggamit sa mga hulagway sa background nga pananglitan mao ang kung gusto nimo nga ang maong imahe magamit sa hingpit nga background sa usa ka panid, kon kini nga panid lapad ug makita sa usa ka desktop computer o mas gamay ug ipadala sa usa ka handheld, mobile mga gamit.
I-upload ang imong hulagway ngadto sa imong web host ug idugang kini sa imong CSS isip background image:
background-image: url (fireworks-over-wdw.jpg);
balik sa background-balik-balik-balik-balik;
posisyon sa luyo: sentro nga sentro;
background-attachment: fixed;
Idugang ang prefix nga browser sa CSS una:
-webkit-background-size: tabon;
-moz-background-size: tabon;
-o-background-size: cover;
Dayon idugang ang propiedad sa CSS:
pananglitan-gidak-on: tabon;
Paggamit sa Nagkalainlain nga mga Imahen nga Nagasulud-on nga Naglain-lain sa mga Device
Samtang ang responsive design alang sa usa ka desktop o usa ka kasinatian sa laptop mahinungdanon, ang lainlaing mga himan nga maka-access sa Web milambo, ug ang nagkalainlain nga mga gidak-on sa screen nag-uban niana.
Sama sa nahisgotan na kaniadto, ang pag-load sa usa ka dako kaayong responsibilidad nga background image sa usa ka smartphone, pananglitan, dili usa ka maayo o bandwidth-conscious nga disenyo.
Hibal-i kung unsaon nimo paggamit ang mga pangutana sa media aron sa pag-alagad sa mga imahen nga angay sa mga lalang nga ipasundayag niini, ug sa pagpauswag sa pagkompetensya sa imong website sa mga mobile device.
Ang orihinal nga artikulo ni Jennfier Krynin. Gigamiman ni Jeremy Girard 9/12/17