Siin saate lisada CSS-i kasutades tundlikke disainkaidreid
Vaadake populaarseid veebisaite täna ja üks disainravim, mida te kindlasti näete, on suured, ekraanipõhised taustpildid. Üks väljakutseid nende piltide lisamisega tuleneb parimast praktikast, et veebisaidid peavad reageerima erinevatele ekraani suurustele ja seadmetele - reageerimisvõimalusega veebidisainile .
Kuna teie veebisaidi paigutus muutub ja selle suurus erineb ekraani suurusega, peavad ka need taustpildid mõõtma vastavalt oma suurust.
Tegelikult on need "vedelikud pildid" üks olulisemaid reageerivaid veebisaite (koos vedeliku võrgu ja meediumipäringutega). Alates algusest on need kolm tükki olnud vastamisvõimelise veebidisaini peamised osad, kuid samas on saidile reaalajas sisestatud pilte alati üsna lihtne lisada (joonised on HTML-märgistusena kodeeritud graafikud), tehes seda Taustpiltidega (mis on leheküljele CSS taustaomadustega lehestikku), on see juba pikka aega olnud paljudele veebidisaineritele ja esiosa arendajatele märkimisväärne väljakutse. Õnneks on CSS-i taustade suuruse lisamine teinud võimalikuks.
Eraldi artiklis käsitlesin, kuidas kasutada CSS3 vara tausta suurust, et pilte venitada aknasse mahutamiseks, kuid selle vara jaoks on veel parem ja kasulikum viis. Selleks kasutame järgmisi vara ja väärtuse kombinatsiooni:
tausta suurus: kate;
Katte märksõna vara ütleb brauserile skaala, et see vastaks aknale, sõltumata sellest, kui suur või väike see aken saab. Kujutis on skaleeritud kogu ekraani katmiseks, kuid esialgseid proportsioone ja kuvasuhteid hoitakse puutumatuna, takistades pildi enda moonutamist.
Pilt paigutatakse aknast nii suureks kui võimalik, nii et kogu akna pind on kaetud. See tähendab, et teie lehel pole tühikuid ega kujutise moonutusi, kuid see võib tähendada ka, et mõnda pilti võib kärpida sõltuvalt ekraani ja pildi kuvasuhetest. Näiteks pildi servad (kas ülevalt, alt, vasakult või paremalt) võivad kujutistele katkeda, olenevalt sellest, milliseid väärtusi kasutate taustapositsiooni jaoks. Kui suunate tausta "ülevalt vasakule", siis liiguvad kõik pildid alt ja paremalt. Kui sa keskendad taustpildi, ületab see ülejäänud küljed, kuid kuna see ülejääk levib, ei mõjuta see ükskõik millist külge vähem.
Kuidas kasutada taustapilti: kate;
Taustpildi loomisel on hea mõte luua üsna suur pilt. Kuigi brauserid saavad pildi väiksema kujunduse ilma visuaalse kvaliteedi märkimisväärselt mõjutamata, kui brauser suurendab kujutise suurust, mis on suurem kui originaalsed mõõtmed, halveneb visuaalne kvaliteet, muutub ähmasemaks ja pikslitaks. Selle puuduseks on see, et teie leht võtab jõudlust, kui esitate hiiglaslikke pilte kõigile ekraanidele.
Kui seda teete, veenduge, et need pildid oleksid õigesti valmis laadimise kiiruseks ja veebi edastamiseks . Lõpuks peate leidma õnneliku keskmise pildi suuruse ja kvaliteedi suhte ning faili sobiva suuruse allalaadimiskiiruste jaoks.
Üks levinumaid taustapilte on tavaline, kui soovid, et see pilt lehitsema kogu tausta, kas see leht on lai ja seda saab lauaarvutis vaadata või palju väiksem, ja see saadetakse pihuarvutile, mobiilile seadmeid.
Laadige oma pilt oma veebi ja lisage see oma taustpilti oma CSS-i.
tausafail: URL (ilutulestik-üle-wdw.jpg);
taust-korrata: no-repeat;
tausta-asukoht: keskus;
tausta-kinnitus: fikseeritud;
Esmalt lisage brauseri eelmääratud CSS:
-webkit-tausta suurus: katte;
-moz-tausta suurus: kate;
-o-tausta suurus: kate;
Seejärel lisage CSS-i varandus:
tausta suurus: kate;
Erinevate piltide kasutamine erinevates seadmetes
Kuigi töölaua või sülearvuti kasutuskogemuse tundlik disain on oluline, on oluliselt kasvanud mitmesugused seadmed, mis veebi pääsevad, ning sellega on kaasas ka suurem ekraanisuuruste valik.
Nagu varem mainitud, ei ole näiteks nutitelefonile väga suur taustpildi laadimine efektiivne või ribalaiust teadlik disain.
Vaadake, kuidas saate kasutada meediumipäringuid kujutiste esitamiseks, mis sobivad nende kuvatavatele seadmetele, ning parandada oma veebisaidi ühilduvust mobiilseadmetega.
Jennfier Krynini algne artikkel. Redigeerinud Jeremy Girard 12.12.17