Hapa ni jinsi ya kuongeza picha za msikivu wa kutumia kwa kutumia CSS
Angalia tovuti maarufu leo na tiba moja ya kubuni ambayo una hakika kuona ni kubwa, picha za kupima picha za skrini. Mojawapo ya changamoto na kuongeza picha hizi hutoka kwa mazoezi bora kwamba tovuti lazima ziitie ukubwa tofauti wa skrini na vifaa - njia inayojulikana kama kubuni ya mtandao ya msikivu .
Kwa kuwa mpangilio wa tovuti yako unabadilika na mizani yenye ukubwa tofauti wa skrini, hivyo pia lazima picha hizi za asili zieneze ukubwa wao ipasavyo.
Kwa kweli, "picha za maji" hizi ni moja ya vipande muhimu vya tovuti za msikivu (pamoja na majiri ya gridi ya maji na vyombo vya habari). Vile vipande vitatu vimekuwa kikuu cha kubuni wa mtandao wa msikivu tangu mwanzo, lakini wakati daima imekuwa rahisi sana kuongeza picha za msikivu zinazoingia kwenye tovuti (picha za ndani ni graphics ambazo zimeandikwa kama sehemu ya markup HTML), kufanya sawa na picha za background (ambazo zimewekwa kwenye ukurasa kwa kutumia mali ya asili ya CSS) zimesababisha kwa muda mrefu changamoto kubwa kwa wabunifu wengi wa wavuti na watengenezaji wa mwisho wa mbele. Kwa kushangaza, uongeze wa mali "ya ukubwa wa asili" katika CSS imefanya hivyo iwezekanavyo.
Katika makala tofauti, nilifunua jinsi ya kutumia picha ya ukubwa wa asili ya CSS3 ili kunyoosha picha ili kufanikiwa kwenye dirisha, lakini kuna njia nzuri zaidi, na manufaa zaidi ya kupeleka kwa mali hii. Ili kufanya hivyo, tutatumia mchanganyiko wa mali na thamani yafuatayo:
ukubwa wa nyuma: kifuniko;
Mali isiyohamishika ya mali ya nenosiri inamwambia kivinjari kuunda picha ili kuzingatia dirisha, bila kujali jinsi kubwa au ndogo hiyo dirisha inapata. Picha imewekwa ili kufikia skrini nzima, lakini uwiano wa awali na uwiano wa kipengele huhifadhiwa vizuri, kuzuia picha yenyewe kuwa haijapotoshwa.
Picha imewekwa kwenye dirisha kubwa iwezekanavyo ili dirisha nzima la uso lifunikwa. Hii inamaanisha kuwa hautawa na matangazo tupu kwenye ukurasa wako au uharibifu wowote kwenye picha hiyo, lakini pia inamaanisha kuwa picha nyingine inaweza kupunguzwa kulingana na uwiano wa kipengele cha skrini na picha iliyo katika swali. Kwa mfano, kando ya picha (ama juu, chini, kushoto, au kulia) inaweza kukatwa kwenye picha, kulingana na maadili gani unayotumia kwa mali ya msimamo wa nyuma. Ikiwa unatazama historia "juu ya kushoto", ziada yoyote kwenye picha itatoka pande za chini na za kulia. Ikiwa unaweka picha ya historia, ziada itatoka pande zote, lakini kwa kuwa ziada hiyo imeenea nje, athari kwa upande wowote itakuwa chini ya kutumikia.
Jinsi ya kutumia ukubwa wa nyuma: kifuniko;
Wakati wa kujenga picha yako ya asili, ni wazo nzuri ya kujenga picha ambayo ni kubwa sana. Wakati vivinjari wanaweza kufanya picha ndogo bila athari inayoonekana juu ya ubora wa visual, wakati kivinjari kinapima picha kwa ukubwa mkubwa zaidi kuliko vipimo vya awali, ubora wa visual utaharibiwa, ukawa na rangi na kupigwa pixelated. Kikwazo kwa hii ni kwamba ukurasa wako unachukua utendaji unapopiga wakati unatoa picha kubwa kwenye skrini zote.
Unapofanya hili, hakikisha kuandaa vizuri picha hizo kwa kasi ya kupakua na utoaji wa mtandao . Mwishoni, unahitaji kupata katikati ya furaha kati ya ukubwa wa kutosha wa picha na ubora na ukubwa wa faili unaofaa kwa kasi ya kupakua.
Mojawapo ya njia za kawaida za kutumia picha za background ni wakati unataka picha hiyo kuchukua historia kamili ya ukurasa, ikiwa ukurasa huo ni pana na kutazamwa kwenye kompyuta ya kompyuta au ndogo sana na unatumwa kwenye handheld, simu vifaa.
Pakia picha yako kwa mwenyeji wako wa wavuti na uongeze kwenye CSS yako kama picha ya asili:
background-image: url (fireworks-over-wdw.jpg);
Rudi nyuma-kurudia: usirudia;
msimamo wa nyuma: kituo cha kituo;
attachment background: fasta;
Ongeza kivinjari cha prefixed CSS kwanza:
ukubwa -webkit-background-cover;
-moz-background-ukubwa: cover;
-o-background-ukubwa: cover;
Kisha kuongeza mali ya CSS:
ukubwa wa nyuma: kifuniko;
Kutumia picha tofauti ambazo zinatumia vifaa vya kuzima
Ingawa muundo wa msikivu kwa ajili ya desktop au uzoefu wa mbali ni muhimu, vifaa mbalimbali vinavyoweza kufikia Mtandao vimeongezeka kwa kiasi kikubwa, na aina kubwa ya ukubwa wa skrini huja na hiyo.
Kama ilivyoelezwa hapo awali, kupakia picha kubwa ya asili ya msikivu juu ya smartphone, kwa mfano, sio ufanisi wa ufanisi au bandwidth-ufahamu.
Jifunze jinsi unavyoweza kutumia maswali ya vyombo vya habari kutumikia picha ambazo zitakuwa sahihi kwa vifaa ambazo wataonyeshwa, na kuboresha utangamano wa tovuti yako na vifaa vya simu.
Makala ya awali na Jennifer Krynin. Iliyotengenezwa na Jeremy Girard 9/12/17