Vaadake täna populaarseid veebisaite ja üks disainiprotseduur, mida kindlasti näete, on suured ekraanil laiuvad taustpildid. Üks väljakutseid nende piltide lisamisel tuleneb parimatest tavadest, mille kohaselt peavad veebisaidid reageerima erinevatele ekraanisuurustele ja seadmetele - see on tuntud kui tundlik veebidisain.
Üks pilt paljude ekraanide jaoks
Kuna teie veebisaidi paigutus muutub ja laieneb erineva ekraanisuurusega, peavad ka need taustapildid oma suurust vastavalt mõõtma. Tegelikult on need "sujuvad pildid" üks reageerivate veebisaitide võtmetükke (koos vedeliku ruudustiku ja meediumipäringutega). Need kolm tükki on algusest peale olnud reageeriva veebidisaini põhiosa, kuid kuigi reageerivat on alati olnud üsna lihtne lisada saidile lisatud pildid (tekstisisesed pildid on graafika, mis on kodeeritud HTML-i märgistuse osana), tehes sama ka taustapiltidega (mis on kujundatud lehele CSS-i taustaomaduste abil) on juba ammu pakkunud märkimisväärset väljakutset paljudele veebidisaineritele ja kasutajaliidesele arendajad. Õnneks on CSS-is "tausta suuruse" atribuudi lisamine selle võimaldanud.
Eraldi artiklis käsitlesime, kuidas CSS3 atribuudi tausta suurus piltide venitamiseks aknasse mahtumiseks, kuid selle atribuudi jaoks on veel parem ja kasulikum viis juurutamiseks. Selleks kasutame järgmist omaduste ja väärtuste kombinatsiooni:
tausta suurus: kate;
Kaanemärksõna omadus käsib brauseril pilti aknasse sobitada, olenemata sellest, kui suur või väike see aken saab. Kujutis on skaleeritud nii, et see kataks kogu ekraani, kuid algsed proportsioonid ja kuvasuhe jäävad puutumatuks, vältides pildi enda moonutamist. Pilt paigutatakse aknasse nii suureks kui võimalik, nii et kogu akna pind oleks kaetud. See tähendab, et teie lehel pole tühje kohti ega pildi moonutusi, kuid seda ka tähendab, et osa pildist võib kärpida, sõltuvalt ekraani ja pildi kuvasuhtest küsimus. Näiteks võivad pildi servad (kas ülemine, alumine, vasak või parem) piltidel ära lõigata, olenevalt sellest, milliseid väärtusi kasutate atribuudi background-position jaoks. Kui suunate tausta vasakule ülemisele küljele, tuleb pildi üleliigne osa alt ja paremalt küljelt. Kui koondate taustpildi, tuleb üleliigne külg kõigist külgedest lahti, kuid kuna see üleliigne osa on laiali jaotatud, on mõju ühele küljele vähem teenitav.
Kuidas kasutada 'background-size: cover;'
Oma taustpildi loomisel on mõistlik luua üsna suur pilt. Kui brauserid saavad pilti väiksemaks muuta, ilma et see visuaalset kvaliteeti märkimisväärselt mõjutaks, siis kui brauser suurendab pilti Kui pildi suurus on suurem kui algsed mõõtmed, siis visuaalne kvaliteet halveneb, muutub uduseks ja pikslitega. Negatiivne külg on see, et teie leht saavutab jõudluse, kui edastate hiiglaslikke pilte kõigile ekraanidele. Kui seda teete, veenduge, et see oleks korralikult valmistage need pildid ette allalaadimiskiiruseks ja veebis edastamiseks. Lõpuks peate leidma õnneliku keskmise piisavalt suure pildi suuruse ja kvaliteedi ning allalaadimiskiiruse jaoks mõistliku failisuuruse vahel.
Üks levinud viise taustpildi suurendamiseks on see, kui soovite, et see pilt võtaks lehe kogu tausta, kas see leht on lai ja seda vaadatakse lauaarvutis või palju väiksem ning kas see saadetakse pihuarvutisse, mobiilseadmesse seadmeid.
Laadige oma pilt veebihosti üles ja lisage see oma CSS-i taustpildina:
taustapilt: url (ilutulestik üle-wdw.jpg);
taust-kordus: ei-kordus;
taustasend: keskpunkt;
taustaga kinnitus: fikseeritud;
Kõigepealt lisage brauseri eesliide CSS:
-veebikomplekt-taust-suurus: kaas;
-moz-background-size: kate;
-o-background-size: kate;
Seejärel lisage CSS-i atribuut:
tausta suurus: kate;
Erinevatele seadmetele sobivate piltide kasutamine
Ehkki laua- või sülearvuti kasutuskogemus on oluline, on seadmete mitmekesisus erinev veebis juurdepääs on märkimisväärselt kasvanud ja sellega kaasnevad suuremad ekraanisuurused seda.
Nagu varem mainitud, ei ole näiteks nutitelefoni väga suure reageerimisvõimega taustpildi laadimine tõhus ega ribalaiust arvestav disain.
Siit saate teada, kuidas saate seda kasutada meediapäringud piltide esitamiseks, mis sobivad nende seadmetega, kus neid kuvatakse, ja parandage veelgi oma veebisaidi ühilduvust mobiilseadmetega.