Lūk, kā pievienot pielāgojamus dizaina attēlus, izmantojot CSS
Apskatiet populāras tīmekļa vietnes šodien un viena dizaina apstrāde, kuru jūs esat pārliecināts redzēt, ir lieli, ekrānpiegādi fona attēli. Viens no izaicinājumiem, pievienojot šos attēlus, nāk no labākās prakses, ka vietnēm ir jāatbild uz dažādiem ekrāna izmēriem un ierīcēm - pieeju, kas pazīstama kā atsaucīgs web dizains .
Tā kā jūsu vietnes izkārtojums maina un mērogojas ar dažādiem ekrāna izmēriem, arī šie fona attēli atbilstoši mēra to lielumu.
Faktiski šie "šķidruma attēli" ir viens no svarīgākajiem tīmekļa vietnēm (kopā ar šķidruma tīklu un mediju vaicājumiem). Šie trīs elementi jau no paša sākuma bija adaptīvas web dizains, taču, lai gan vietnei vienmēr ir bijusi diezgan viegli pievienot reaģējošus iekšējos attēlus (inline attēli ir grafiki, kas tiek kodēti kā HTML iezīmēšanas daļa), veicot Tas pats ar fona attēliem (kas ir veidoti lapā, izmantojot CSS fona rekvizītus) jau ilgu laiku ir ievērojams izaicinājums daudziem tīmekļa dizaineriem un priekšējiem izstrādātājiem. Par laimi, fona izmēra īpašības pievienošana CSS ir ļāvusi to izdarīt.
Atsevišķā rakstā es aplūkoju, kā izmantot CSS3 īpašumu fona izmēru, lai izstieptu attēlus, lai tie ietilptu logā, taču šim īpašumam ir vēl labāks, daudz noderīgāks veids. Lai to izdarītu, mēs izmantosim šādu īpašuma un vērtību kombināciju:
fona izmērs: vāciņš;
Pārklājuma atslēgvārda īpašums norāda pārlūkprogrammai, lai mēroga attēlu, kas atbilstu logam, neatkarīgi no tā, cik liels vai mazs šis logs izpaužas. Attēls tiek mērogots, lai aptvertu visu ekrānu, bet sākotnējās proporcijas un malu attiecība tiek saglabāta neskarta, tādējādi tiek traucēta paša attēla izkropļošana.
Attēls tiek novietots logā pēc iespējas lielākam, lai aptvertu visu loga virsmu. Tas nozīmē, ka jūsu lapā nebūs neviena tukša plankuma vai attēla izkropļojumi, bet tas arī nozīmē, ka daļu no attēla var samazināt atkarībā no ekrāna un attiecīgā attēla malu attiecības. Piemēram, attēla malas (augšējā, apakšējā, kreisā vai labā) var tikt pārgrieztas uz attēliem atkarībā no tā, kuras vērtības jūs izmantojat fona stāvokļa īpašumam. Ja orientējat fonu uz augšu pa kreisi, attēla pārpalikums nokrīt no apakšas un labās puses. Ja fona attēls tiek fokusēts, pārpalikums nokrīt no visām pusēm, bet, tā kā šis pārsniegums ir izkliedēts, ietekme uz kādu no pusēm būs mazāka.
Kā lietot fona izmēru: vāciņu;
Veidojot fona attēlu, ir ieteicams izveidot diezgan lielu attēlu. Lai gan pārlūkprogrammas var padarīt attēlu mazāku, neradot ievērojamu ietekmi uz vizuālo kvalitāti, kad pārlūkprogramma palielina attēlu tādā izmērā, kas ir lielāks par sākotnējo izmēru, vizuālā kvalitāte pasliktinās, kļūst neskaidra un tiek izlīdzināta. Negatīvie panākumi ir tādi, ka, veicot milzu attēlu uz visiem ekrāniem, jūsu lapa uzņem veiktspēju.
Kad jūs to izdarīsiet, pārliecinieties, ka šie attēli ir pareizi sagatavoti, lai lejupielādētu ātrumu un nodrošinātu piegādi tiešsaistē . Galu galā jums ir nepieciešams atrast laimīgu videoklipu starp pietiekami lielu attēla izmēru un kvalitāti un saprātīgu faila lielumu lejupielādes ātrumam.
Viens no izplatītākajiem veidiem, kā izmantot mērogošanas fona attēlus, ir tas, ka vēlaties, lai šis attēls pārņemtu pilnu lapas fonu, neatkarīgi no tā, vai šī lapa ir plaša un tiek aplūkota galddatorā vai ir daudz mazāka, un to nosūta uz rokas, mobilo ierīces.
Augšupielādējiet savu attēlu savā tīmekļa uzņēmējā un pievienojiet to CSS kā fona attēlu:
fona-attēls: url (uguņošana-over-wdw.jpg);
fona atkārtojums: nav-atkārtot;
fona stāvoklis: centra centrs;
fona piestiprinājums: fiksēts;
Vispirms pievienojiet pārlūka prefiksu CSS:
-webkit-fona izmērs: vāciņš;
-moz-fona izmērs: pārklājums;
-fons-izmērs: vāciņš;
Pēc tam pievienojiet CSS īpašumu:
fona izmērs: vāciņš;
Dažādu attēlu izmantošana, kas atbilst dažādām ierīcēm
Kamēr svarīgs ir darbvirsmas vai klēpjdatoru pieredzes dizains, ir ievērojami pieaudzis ierīču daudzums, kas var piekļūt tīmeklim, un tam ir lielāks ekrāna izmēru klāsts.
Kā jau iepriekš minēts, piemēram, viedtālruņa iekļaušana ļoti lielā atsaucīgā fona attēla dēļ nav efektīvs vai ar joslas platumu saistīts dizains.
Uzziniet, kā varat izmantot multivides vaicājumus, lai rādītu attēlus, kas būtu piemēroti ierīcēm, kurās tie tiks rādīti, kā arī uzlabosit vietnes saderību ar mobilajām ierīcēm.
Jennfjē Krīnina oriģinālais raksts. Rediģējis Džeremijs Girards 17/12/12