Obrazy są ważną częścią atrakcyjnych projektów stron internetowych. Obejmuje to użycie obrazów tła. Są to obrazy i grafika, które są używane za obszary strony w przeciwieństwie do obrazów, które są prezentowane jako część stron zawartości. Te obrazy tła mogą dodać wizualne zainteresowanie stronie i pomóc w osiągnięciu wizualnego projektu, którego możesz szukać na stronie.
Jeśli zaczniesz pracować z obrazami tła, niewątpliwie natrafisz na scenariusz, w którym chcesz rozciągnąć obraz, aby pasował do strony. Dotyczy to szczególnie responsywnych stron internetowych dostarczanych do szerokiej gamy urządzeń i rozmiarów ekranu.
To pragnienie rozciągnięcia obrazu tła jest bardzo powszechnym pragnieniem projektantów stron internetowych, ponieważ nie każdy obraz pasuje do przestrzeni witryny. Zamiast ustawiania stałego rozmiaru, rozciągnięcie obrazu pozwala mu dopasować się do strony, bez względu na to, jak szerokie lub wąskie jest okno przeglądarki.
Najlepszym sposobem na rozciągnięcie obrazu w celu dopasowania go do tła strony jest użycie właściwości CSS3 dla tła. Oto przykład, który wykorzystuje obraz tła dla treści strony i ustawia rozmiar na 100%, dzięki czemu zawsze będzie rozciągać się tak, aby pasował do ekranu.
body { background: url (bgimage.jpg) no-repeat; rozmiar tła: 100%; }
Według witryny caniuse.com ta usługa działa w IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ i we wszystkich głównych przeglądarkach mobilnych. Obejmuje to wszystkie nowoczesne przeglądarki dostępne obecnie, co oznacza, że powinieneś używać tej własności bez obawy, że nie będzie działać na czyimś ekranie.
Udawanie rozciąganego tła w starszych przeglądarkach
Jest bardzo mało prawdopodobne, abyś musiał obsługiwać przeglądarki starsze niż IE9, ale załóżmy, że obawiasz się, że IE8 nie obsługuje tej właściwości. W takim przypadku możesz sfałszować rozciągnięte tło. Możesz także użyć prefiksów przeglądarki Firefox 3.6 (-moz-tło-rozmiar) i Opera 10.0 (-o-rozmiar tła).
Najłatwiejszy sposób na sfałszowanie rozciągniętego obrazu tła polega na rozciągnięciu go na całą stronę. Wtedy nie skończysz z dodatkową przestrzenią lub musisz się martwić, że twój tekst pasuje do rozciągniętego obszaru. Oto jak to zrobić:
id = "bg" />
- Najpierw upewnij się, że wszystkie przeglądarki mają 100% wysokości, 0 marginesów i 0 wypełnień na i
HTMLCIAŁOelementy. Umieść następujące elementy w nagłówku dokumentu HTML: - Dodaj obraz, który ma być tłem jako pierwszy element strony internetowej, i nadaj mu
ID"bg": - Ustaw obraz w tle tak, aby był umocowany u góry i po lewej stronie i ma 100% szerokości i 100% wysokości. Dodaj to do swojego arkusza stylów:
img # bg {- position: fixed;
- top: 0;
- lewo: 0;
- szerokość: 100%;
- wysokość: 100%;
- }
- Dodaj całą zawartość do strony wewnątrz pliku
DIVelement zID"treści". DodajDIVpod obrazem:Wszystkie twoje treści tutaj - w tym nagłówki, akapity itp.- Uwaga: ciekawie jest teraz spojrzeć na swoją stronę. Obraz powinien być rozciągnięty, ale brakuje Ci treści. Czemu? Ponieważ obraz tła ma 100% wysokości, a podział treści to po obraz w przepływie dokumentu - większość przeglądarek go nie wyświetla.
- Ustaw zawartość tak, aby była względna i zawierała
z-index1. Spowoduje to przekroczenie obrazu tła w przeglądarkach zgodnych ze standardami. Dodaj to do swojego arkusza stylów:#zawartość {- pozycja: względna;
- indeks z: 1;
- }
- Ale nie skończyłeś. Internet Explorer 6 nie jest zgodny ze standardami i nadal ma pewne problemy. Istnieje wiele sposobów na ukrycie CSS przed każdą przeglądarką, ale IE6, ale najłatwiej (i najmniej prawdopodobne, że spowoduje to inne problemy) jest użycie warunkowych komentarzy. Umieść następujące elementy po swoim arkuszu stylów w nagłówku dokumentu:
- Wewnątrz wyróżnionego komentarza dodaj kolejny arkusz stylów z niektórymi stylami, aby uzyskać IE 6, aby grać ładnie:
- Sprawdź także w IE 7 i IE 8. Może być konieczne dostosowanie komentarzy w celu ich obsługi. Jednak zadziałało, kiedy go przetestowałem.
OK - to jest zdecydowanie DROGOWY przesad. Bardzo niewiele witryn wymaga obsługi IE 7 lub 8, znacznie mniej IE6! Jako takie podejście jest przestarzałe i prawdopodobnie niepotrzebne. Zostawiam to tutaj bardziej jako wzór ciekawości, o ile trudniejsze rzeczy były, zanim wszystkie nasze przeglądarki grały tak ładnie razem!
Udawanie obrazu rozciągniętego tła na mniejszej przestrzeni
Możesz użyć podobnej techniki, aby sfałszować rozciągnięty obraz w tle DIV lub inny element na twojej stronie internetowej. Jest to nieco trudniejsze, ponieważ musisz użyć pozycjonowania bezwzględnego lub mieć dziwne problemy z odstępami w innych częściach strony.
- Umieść obraz na stronie, której chcę użyć jako tła.
- W arkuszu stylów ustaw szerokość i wysokość obrazu. Uwaga: możesz użyć wartości procentowych dla szerokości lub wysokości, ale łatwiej jest dopasować wartości długości do wysokości.
img # bg {- szerokość: 20em;
- wzrost: 30em;
- }
- Umieść swoją treść w div z
ID"treść", tak jak my powyżej:Wszystkie twoje treści tutaj - Dopasuj element treści tak, aby miał taką samą szerokość i wysokość jak obraz tła:
div # content {- szerokość: 20em;
- wzrost: 30em;
- }
- Następnie umieść zawartość na tej samej wysokości co obraz.Więc jeśli twój obraz to 30em, będziesz miał styl topu: -30em; Nie zapomnij umieścić indeksu Z na 1 w treści.
#zawartość {- pozycja: względna;
- top: -30em;
- indeks z: 1;
- szerokość: 20em;
- wzrost: 30em;
- }
- Następnie dodaj indeks z -1 dla użytkowników IE 6, tak jak to zrobiłeś powyżej:
Ponownie, dzięki rozmiarowi tła, korzystającemu z szerokiego wsparcia przeglądarki, teraz to podejście jest również bardzo niepotrzebne i przedstawione jako produkt z minionej epoki. Jeśli chcesz skorzystać z tego podejścia, po prostu przetestuj to w jak największej liczbie przeglądarek. Jeśli zmienisz rozmiar swoich treści, musisz zmienić rozmiar kontenera i obrazu tła, w przeciwnym razie otrzymasz dziwne wyniki.
