Spójrz na popularne strony internetowe już dziś i jeden zabieg projektowy, który na pewno zobaczysz, to duże, rozparte na ekranie obrazy tła. Jednym z wyzwań związanych z dodawaniem tych obrazów jest najlepsza praktyka, którą witryny muszą reagować na różne rozmiary ekranów i urządzenia - podejście znane jako responsywny projekt strony.
Ponieważ układ Twojej witryny zmienia się i skaluje z różnymi rozmiarami ekranu, również te obrazy w tle powinny odpowiednio zmieniać swój rozmiar. W rzeczywistości te "płynne obrazy" są jednym z kluczowych elementów responsywnych stron internetowych (wraz z płynną siatką i zapytaniami o media). Te trzy elementy były od początku podstawą responsywnego projektowania stron internetowych, ale chociaż zawsze było dość łatwo dodawać responsywne obrazy wbudowane do witryny (obrazy w linii są grafiką zakodowaną jako część znaczników HTML), robiąc to samo z obrazami w tle (które są stylizowane na stronę przy użyciu właściwości tła CSS) od dawna stanowiło poważne wyzwanie dla wielu projektantów stron internetowych i programistów. Na szczęście dodanie do CSS właściwości "background-size" umożliwiło to.
W osobnym artykule omówiłem sposób korzystania z właściwości CSS3 rozmiar tła do rozciągania obrazów w celu dopasowania do okna, ale istnieje jeszcze lepszy, bardziej użyteczny sposób wdrożenia dla tej właściwości. W tym celu użyjemy następującej kombinacji właściwości i wartości:
rozmiar tła: okładka;
The pokrywa właściwość słowa kluczowego informuje przeglądarkę, aby przeskalowała obraz do okna, niezależnie od tego, jak duże lub małe jest to okno. Obraz jest skalowany, aby pokryć cały ekran, ale oryginalne proporcje i proporcje pozostają nienaruszone, zapobiegając zniekształceniu samego obrazu. Obraz jest umieszczony w oknie tak dużym, jak to możliwe, tak aby cała powierzchnia okna była zakryta. Oznacza to, że nie ma żadnych pustych miejsc na stronie ani zniekształceń obrazu, ale oznacza to również, że część obrazu może zostać obcięta w zależności od proporcji ekranu i obrazu. Na przykład krawędzie obrazu (górny, dolny, lewy lub prawy) mogą zostać obcięte na obrazach, w zależności od wartości używanych dla właściwości position background. Jeśli ustawisz tło w "lewym górnym rogu", nadmiar obrazu spadnie z dolnej i prawej strony. Jeśli wyśrodkujesz obraz tła, nadmiar spadnie ze wszystkich boków, ale ponieważ ten nadmiar jest rozłożony, wpływ z jednej strony będzie mniejszy.
Jak używać rozmiar tła: okładka;
Tworząc obraz tła, dobrze jest stworzyć obraz dość duży. Podczas gdy przeglądarki mogą sprawić, że obraz będzie mniejszy bez widocznego wpływu na jakość obrazu, gdy przeglądarka powiększy obraz do rozmiaru większego niż jego oryginalne wymiary, jakość obrazu ulegnie pogorszeniu, zamazaniu i pikselowi. Wadą tego jest to, że Twoja strona ma wydajność, gdy dostarczasz gigantyczne obrazy na wszystkie ekrany. Gdy to zrobisz, upewnij się, że odpowiednio przygotowałeś te zdjęcia do prędkości pobierania i dostarczania do sieci. Na koniec musisz znaleźć szczęśliwe medium pomiędzy wystarczająco dużym rozmiarem i jakością obrazu a rozsądnym rozmiarem pliku dla prędkości pobierania.
Jednym z najczęstszych sposobów skalowania obrazów tła jest to, czy chcesz, aby obraz zajmował całe tło strony, czy strona jest szeroka i jest wyświetlana na komputerze stacjonarnym, czy znacznie mniejsza i jest wysyłana do przenośnego urządzenia przenośnego. pomysłowość.
Prześlij obraz do swojego usługodawcy hostingowego i dodaj go do swojego CSS jako obrazu tła:
background-image: url (fireworks-over-wdw.jpg);background-repeat: no-repeat;położenie tła: centrum centrum;tło-załącznik: naprawiony;
Dodaj najpierw CSS z prefiksem przeglądarki:
-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;
Następnie dodaj właściwość CSS:
rozmiar tła: okładka;
Używanie różnych obrazów, które pasują do różnych urządzeń
Podczas gdy responsywny projekt dla komputerów stacjonarnych lub laptopów jest ważny, różnorodność urządzeń, które mogą uzyskać dostęp do Internetu, znacznie wzrosła, a także większa różnorodność rozmiarów ekranu.
Jak wcześniej wspomniano, ładowanie bardzo dużego obrazu tła reagującego na smartfony nie jest na przykład wydajnym projektem uwzględniającym przepustowość.
Dowiedz się, jak używać zapytań o media do wyświetlania obrazów, które będą odpowiednie dla urządzeń, na których będą wyświetlane, i dodatkowo poprawisz kompatybilność swojej witryny z urządzeniami mobilnymi.
