Spójrz na popularne dziś witryny internetowe, a jednym z rozwiązań projektowych, które na pewno zobaczysz, są duże, obejmujące cały ekran obrazy tła. Jedno z wyzwań związanych z dodawaniem tych obrazów wynika z najlepszych praktyk, zgodnie z którymi witryny muszą reagować na różne rozmiary ekranu i urządzenia — podejście znane jako responsywne projektowanie stron internetowych.
Jeden obraz na wiele ekranów
Ponieważ układ witryny zmienia się i skaluje wraz z różnymi rozmiarami ekranu, obrazy tła również muszą odpowiednio skalować swój rozmiar. W rzeczywistości te „płynne obrazy” są jednym z kluczowych elementów responsywnych witryn internetowych (wraz z płynną siatką i zapytaniami o media). Te trzy elementy były podstawą responsywnego projektowania stron internetowych od samego początku, ale chociaż zawsze było dość łatwo dodać responsywne obrazy wbudowane do witryny (obrazy wbudowane to grafika zakodowana jako część znaczników HTML), robiąc to samo z obrazami tła (które są stylizowane na stronie za pomocą właściwości tła CSS) od dawna stanowi poważne wyzwanie dla wielu projektantów stron internetowych i front-end programiści. Na szczęście umożliwiło to dodanie właściwości „background-size” w CSS.
W osobnym artykule omówiliśmy, jak korzystać z Właściwość CSS3 rozmiar tła aby rozciągnąć obrazy, aby zmieściły się w oknie, ale istnieje jeszcze lepszy, bardziej użyteczny sposób wdrożenia tej właściwości. Aby to zrobić, użyjemy następującej kombinacji właściwości i wartości:
rozmiar tła: okładka;
Właściwość słowa kluczowego cover mówi przeglądarce, aby przeskalować obraz, aby dopasować go do okna, niezależnie od tego, jak duże lub małe będzie to okno. Obraz jest skalowany tak, aby obejmował cały ekran, ale oryginalne proporcje i proporcje pozostają nienaruszone, co zapobiega zniekształceniu samego obrazu. Obraz jest umieszczany w oknie tak dużym, jak to możliwe, tak aby zakrył całą powierzchnię okna. Oznacza to, że nie będzie żadnych pustych miejsc na stronie ani żadnych zniekształceń na obrazie, ale także oznacza, że część obrazu może zostać przycięta w zależności od proporcji ekranu i obrazu w pytanie. Na przykład krawędzie obrazu (góra, dół, lewa lub prawa) mogą zostać obcięte na obrazach, w zależności od wartości użytych we właściwości background-position. Jeśli ustawisz tło na „lewy górny róg”, nadmiar na obrazie zejdzie z dolnej i prawej strony. Jeśli wycentrujesz obraz tła, nadmiar zejdzie ze wszystkich stron, ale ponieważ nadmiar jest rozłożony, wpływ na którąkolwiek stronę będzie mniejszy.
Jak używać 'background-size: cover;'
Tworząc obraz tła, dobrym pomysłem jest utworzenie obrazu, który jest dość duży. Podczas gdy przeglądarki mogą zmniejszać obraz bez zauważalnego wpływu na jakość wizualną, gdy przeglądarka skaluje się i obraz do rozmiaru większego niż jego oryginalne wymiary, jakość wizualna ulegnie pogorszeniu, stanie się rozmazana i pikselowane. Wadą tego jest to, że Twoja strona traci wydajność, gdy dostarczasz gigantyczne obrazy na wszystkie ekrany. Kiedy to zrobisz, upewnij się, że prawidłowo przygotuj te obrazy do szybkości pobierania i dostarczania przez Internet. W końcu musisz znaleźć złoty środek między wystarczająco dużym rozmiarem i jakością obrazu a rozsądnym rozmiarem pliku dla prędkości pobierania.
Jednym z typowych sposobów używania skalowania obrazów tła jest sytuacja, gdy chcesz, aby ten obraz zajmował całe tło strony, niezależnie od tego, czy strona jest szeroka i jest wyświetlana na komputerze stacjonarnym, czy znacznie mniejsza i jest wysyłana na palmtopa, telefon komórkowy urządzenia.
Prześlij swój obraz do swojego usługodawcy hostingowego i dodaj go do CSS jako obraz tła:
obraz w tle: url (fajerwerki-nad-wdw.jpg);
powtarzanie w tle: bez powtórzeń;
pozycja tła: środek centrum;
załącznik w tle: naprawiony;
Najpierw dodaj CSS z prefiksem przeglądarki:
-webkit-background-size: okładka;
-moz-background-size: okładka;
-o-rozmiar-tła: okładka;
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ń
Chociaż responsywny projekt dla komputera stacjonarnego lub laptopa jest ważny, różnorodność urządzeń które mogą uzyskać dostęp do sieci znacznie się rozrosły, a wraz z nią pojawiła się większa różnorodność rozmiarów ekranów że.
Jak wcześniej wspomniano, ładowanie bardzo dużego responsywnego obrazu tła na przykład na smartfonie nie jest wydajnym projektem ani nie uwzględnia przepustowości.
Dowiedz się, jak możesz używać zapytania medialne aby wyświetlać obrazy, które będą odpowiednie dla urządzeń, na których będą wyświetlane, i jeszcze bardziej poprawić kompatybilność Twojej witryny z urządzeniami mobilnymi.