Jak rozciągnąć obraz tła, aby dopasować go do strony internetowej?

Zainteresuj swoją witryną wizualną grafiką w tle

Co wiedzieć

• Preferowana metoda: użyj właściwości CSS3 dla rozmiar tła i ustaw go na pokrywa .
• Metoda alternatywna: użyj właściwości CSS3 dla rozmiar tła Ustawić 100% oraz pozycja w tle Ustawić środek.

W tym artykule wyjaśniono dwa sposoby rozciągnięcia obrazu tła, aby dopasować go do strony internetowej za pomocą CSS3.

Nowoczesna droga

Obrazy są ważną częścią atrakcyjności projekty stron internetowych . Dodają wizualnego zainteresowania do strony i pomogą Ci osiągnąć projekt, którego szukasz. Podczas pracy z obrazami tła możesz chcieć, aby obraz został rozciągnięty, aby zmieścił się na stronie, pomimo szeroka gama urządzeń i rozmiarów ekranu .

Najlepszym sposobem na rozciągnięcie obrazu tak, aby pasował do tła elementu, jest użycie CSS3 nieruchomość, dla rozmiar tła i ustaw ją na pokrywa .

|_+_|

Korzystając z powyższego przykładu z rozmiar tła Ustawić 100% zamiast tego widać, że CSS wygląda w większości tak samo.

Wynik w przeglądarce pełnoekranowej lub podobnej do obrazu jest prawie identyczny. Jednak przy węższym ekranie pojawiają się wady.

Oczywiście nie jest to idealne rozwiązanie, ale sprawdzi się jako rozwiązanie awaryjne.

Według caniuse.com , ta właściwość działa w IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ oraz we wszystkich głównych przeglądarkach mobilnych. Obejmuje to wszystkie dostępne obecnie nowoczesne przeglądarki, co oznacza, że ​​powinieneś używać tej właściwości bez obawy, że nie będzie działać na czyimś ekranie.

Pomiędzy tymi dwiema metodami nie powinieneś mieć żadnych trudności z obsługą prawie wszystkich przeglądarek. Jak rozmiar tła: okładka zyskuje jeszcze większą akceptację wśród przeglądarek, nawet ta awaria stanie się niepotrzebna. Jasne jest, że CSS3 i bardziej responsywne praktyki projektowe uprościły i usprawniły wykorzystanie obrazów jako adaptacyjnego tła w elementach HTML.