Evo kako dodati odgovarajuće dizajnerske slike koristeći CSS
Pogledajte popularne web stranice danas i jedan dizajn tretmana koji ste sigurni da vidite je velika slika zaslona koja obuhvata ekran. Jedan od izazova sa dodavanjem ovih slika dolazi od najbolje prakse da web stranice moraju da odgovore na različite veličine ekrana i uređaje - pristup poznat kao odgovarajući web dizajn .
Budući da se izgled vašeg veb sajta mijenja i razmjeri s različitim veličinama ekrana, takve pozadinske slike moraju smanjiti njihovu veličinu u skladu s tim.
Zapravo, ove "slike sa fluidima" su jedan od ključnih komada odgovarajućih web stranica (zajedno sa fluidnom mrežom i medijskim upitima). Ova tri komada su od početka bila glavna odzivna web dizajn, ali iako je prilično lako dodati odgovarajuće inline slike na web lokaciju (slike su grafike koje su kodirane kao dio HTML oznake), čineći isto s pozadinskim slikama (koje su stvorene na stranici koristeći CSS osobine) dugo je pružalo značajan izazov mnogim web dizajnerima i naprednim developerima. Srećom, dodavanje imovine "background-size" u CSS-u je učinilo to moguće.
U odvojenom članku, pokrivala sam kako da koristim veličinu pozadine CSS3 za rastezanje slika kako bi se uklapala u prozor, ali postoji još bolji i korisniji način za primjenu ove osobine. Da bismo to uradili, koristićemo sljedeću kombinaciju svojstava i vrednosti:
background-size: cover;
Osobina naslovne ključne riječi govori pretraživaču da razmjeri sliku kako bi se uklapao u prozor, bez obzira na to koliko veliki ili mali prozor dobija. Slika je skalirana da pokrije ceo ekran, ali originalni proporcije i razmera ostaju netaknuti, sprečavajući izobličenje slike.
Slika se postavlja u prozor što je moguće veće, tako da je pokrivena celokupna površina prozora. To znači da na vašoj stranici nećete biti praznih mesta ili bilo kakve izobličenosti na slici, ali to takođe znači da se neke slike mogu otkloniti u zavisnosti od odnosa ekrana i slike u pitanju. Na primjer, ivice slike (gornje, donje, lijevo ili desno) mogu se prekinuti na slikama, zavisno od toga koje vrijednosti koristite za svojstvo pozadine. Ako orijentišete pozadinu na "gornje levo", svaki višak na slici će se desiti sa donje i desne strane. Ako centrirate pozadinsku sliku, višak će se iskočiti sa svih strana, ali pošto je taj višak rasprostranjen, uticaj na bilo kojoj strani će biti manje servisiran.
Kako koristiti veličinu pozadine: poklopac;
Kada kreirate svoju pozadinsku sliku, dobra je ideja da napravite sliku koja je prilično velika. Dok pregledači mogu učiniti sliku manja bez vidljivog uticaja na vizuelni kvalitet, kada pregledač skenira sliku veličine koja je veća od originalnih dimenzija, vizuelni kvalitet će biti degradiran, postao zamućen i pikseliran. Nedostatak ovoga je da vaša stranica uzima hitan učinak kada isporučujete džinovske slike na sve ekrane.
Kada ovo uradite, vodite računa da pravilno pripremite te slike za brzinu prenosa i dostavljanje weba . Na kraju morate pronaći srećni medij između dovoljno velike veličine i kvaliteta slike i razumne veličine datoteke za brzine prenosa.
Jedan od uobičajenih načina za korištenje skaliranja slike pozadine je kada želite da ova slika preuzme punu pozadinu stranice, bez obzira da li je ta stranica široka i koja se gleda na desktop računalo ili mnogo manja i koja se šalje na ručni, mobilni uređaji.
Postavite sliku na web host i dodajte ga u svoj CSS kao pozadinsku sliku:
background-image: url (fireworks-over-wdw.jpg);
background-repeat: no-repeat;
pozadinska pozicija: centar centra;
background-attachment: fiksni;
Prvo dodajte pregledač prefiksiran CSS:
-webkit-background-size: cover;
-moz-background-size: poklopac;
-o-background-size: cover;
Zatim dodajte svojstvo CSS:
background-size: cover;
Korišćenje različitih slika koje odgovaraju različitim uređajima
Iako je odzivan dizajn za radnu površinu ili laptop iskustvo važan, raznovrsnost uređaja koji mogu pristupiti Vebu značajno su porasla, a time i veći broj veličina ekrana.
Kao što je ranije pomenuto, na primer, učitavanje veoma velike pozadinske slike na pametnom telefonu nije efikasan dizajn koji je svestan propusnosti.
Saznajte kako možete koristiti medijske upite za prikazivanje slika koje će odgovarati uređajima na kojima će biti prikazane, a dodatno poboljšati kompatibilnost vašeg web sajta sa mobilnim uređajima.
Originalni članak Jennfier Krynin. Uredio Jeremy Girard 9.12.17