Apskatiet mūsdienās populārās vietnes un viena dizaina apstrāde, kuru noteikti redzēsit, ir lieli, ekrānu aptveroši fona attēli. Viens no izaicinājumiem, pievienojot šos attēlus, izriet no labākās prakses, ka vietnēm jāatbild uz dažādiem ekrāna izmēriem un ierīcēm - pieeja, kas pazīstama kā atsaucīgs tīmekļa dizains.
Viens attēls daudziem ekrāniem
Tā kā jūsu vietnes izkārtojums mainās un mērogojas ar dažādu ekrāna izmēru, arī šiem fona attēliem attiecīgi jāsamazina to lielums. Faktiski šie "plūstošie attēli" ir viens no atsaucīgo vietņu galvenajiem elementiem (kopā ar šķidruma režģi un multivides vaicājumiem). Šie trīs gabali kopš sākuma ir bijuši atsaucīga tīmekļa dizaina štāpeļšķiedrām, taču, lai arī atsaucīgu pievienošanu vienmēr ir bijis diezgan viegli ievietot attēlus vietnē (iekļautie attēli ir grafika, kas tiek kodēta kā daļa no HTML iezīmes), rīkojoties tāpat kā ar fona attēliem (kas tiek veidoti lapā, izmantojot CSS fona rekvizītus) jau sen ir sagādājis ievērojamu izaicinājumu daudziem tīmekļa dizaineriem un priekšējai daļai izstrādātājiem. Par laimi, "fona lieluma" īpašuma pievienošana CSS to ir padarījusi iespējamu.
Atsevišķā rakstā mēs aplūkojām, kā lietot CSS3 rekvizīta fona lielums izstiept attēlus, lai tie ietilptu logā, taču šim īpašumam ir vēl labāks, noderīgāks izvietošanas veids. Lai to izdarītu, mēs izmantosim šādu rekvizītu un vērtību kombināciju:
fona lielums: vāks;
Vāka atslēgvārda rekvizīts liek pārlūkprogrammai mērogot attēlu, lai tas atbilstu logam, neatkarīgi no tā, cik liels vai mazs logs kļūst. Attēls tiek mērogots, lai aptvertu visu ekrānu, taču sākotnējās proporcijas un malu attiecība tiek saglabāta neskarta, novēršot paša attēla sagrozīšanu. Attēls tiek ievietots logā pēc iespējas lielāks, lai visa loga virsma būtu pārklāta. Tas nozīmē, ka jūsu lapā nebūs neviena tukša plankuma vai attēla sagrozīšanas, bet arī tas nozīmē, ka daļa attēla var tikt apgriezta atkarībā no ekrāna un attēla proporcijas jautājums. Piemēram, attēlam var tikt nogrieztas attēla malas (augšējā, apakšējā, kreisā vai labā puse) atkarībā no tā, kuras vērtības izmantojat rekvizītam fona pozīcija. Ja orientējat fonu uz "kreisajā augšējā stūrī", visi attēla pārpalikumi nāks no apakšējās un labās puses. Ja centrējat fona attēlu, pārpalikums nāks no visām pusēm, bet, tā kā šis pārpalikums ir izkliedēts, ietekme uz jebkuru pusi būs mazāka.
Kā lietot 'background-size: cover;'
Veidojot fona attēlu, ieteicams izveidot diezgan lielu attēlu. Lai gan pārlūkprogrammas var padarīt attēlu mazāku, būtiski neietekmējot vizuālo kvalitāti, pārlūkprogramma palielina attēla lielumā, kas ir lielāks par sākotnējiem izmēriem, vizuālā kvalitāte tiks pasliktināta, kļūst neskaidra un pikseļu. Negatīvais ir tas, ka jūsu lapa iegūst veiktspēju, kad jūs nogādājat milzu attēlus uz visiem ekrāniem. Kad jūs to darāt, pārliecinieties, ka esat pareizi sagatavojiet šos attēlus lejupielādes ātrumam un piegādei tīmeklī. Galu galā jums jāatrod laimīgais vide starp pietiekami lielu attēla izmēru un kvalitāti un saprātīgu faila lielumu lejupielādes ātrumam.
Viens no izplatītākajiem fona attēlu mērogošanas veidiem ir tas, kad vēlaties, lai attēls aizņemtu visu lapas fonu. vai šī lapa ir plata un tiek skatīta galddatorā, vai ir daudz mazāka, un tiek sūtīta uz rokas mobilo ierīces.
Augšupielādējiet attēlu tīmekļa mitinātājā un pievienojiet to CSS kā fona attēlu:
fona attēls: url (uguņošana-over-wdw.jpg);
fona atkārtojums: neatkārtot;
fona stāvoklis: centra centrs;
fona stiprinājums: fiksēts;
Vispirms pievienojiet pārlūkprogrammas prefiksu CSS:
-webkit-background-size: vāks;
-moz-background-size: vāks;
-ofona izmērs: vāks;
Pēc tam pievienojiet CSS rekvizītu:
fona lielums: vāks;
Izmantojot dažādus attēlus, kas piemēroti dažādām ierīcēm
Kaut arī darbvirsmas vai klēpjdatora pieredzes izveide ir svarīga, ierīču dažādība kas var piekļūt tīmeklim, ir ievērojami pieaudzis, un ir pieejams lielāks ekrānu izmēru klāsts to.
Kā jau minēts iepriekš, ļoti liela atsaucīga fona attēla ielāde, piemēram, viedtālrunī, nav efektīvs vai joslas platumu apzinošs dizains.
Uzziniet, kā jūs varat izmantot plašsaziņas līdzekļu vaicājumi lai rādītu attēlus, kas būs piemēroti ierīcēm, kurās tie tiks parādīti, un vēl vairāk uzlabotu jūsu vietnes saderību ar mobilajām ierīcēm.