Погледнете популярните уебсайтове днес и едно дизайнерско лечение, което със сигурност ще видите, са големи, обхващащи екрана фонови изображения. Едно от предизвикателствата при добавянето на тези изображения идва от най-добрата практика, че уебсайтовете трябва да реагират на различни размери на екрана и устройства - подход, известен като отзивчив уеб дизайн.
Едно изображение за много екрани
Тъй като оформлението на вашия уеб сайт се променя и мащабира с различни размери на екрана, така и тези фонови изображения трябва да мащабират съответно своя размер. Всъщност тези „флуидни изображения“ са една от ключовите части на отзивчивите уебсайтове (заедно с флуидна мрежа и медийни заявки). Тези три части са основна част от отзивчивия уеб дизайн от самото начало, но въпреки че винаги е било доста лесно да се добави отзивчив вградени изображения към сайт (вградените изображения са графиките, които са кодирани като част от HTML маркировката), правейки същото с фонови изображения (които са стилизирани в страницата с помощта на CSS фонови свойства) отдавна е значително предизвикателство за много уеб дизайнери и преден край разработчици. За щастие добавянето на свойството "background-size" в CSS направи това възможно.
В отделна статия разгледахме как да използваме CSS3 размер на фона на свойството за разтягане на изображения, за да се поберат в прозорец, но има още по-добър, по-полезен начин за разполагане за това свойство. За целта ще използваме следната комбинация от свойства и стойност:
размер на фона: корица;
Свойството на ключовата дума на корицата казва на браузъра да мащабира изображението така, че да се побере в прозореца, независимо колко голям или малък получава този прозорец. Изображението се мащабира, за да покрие целия екран, но оригиналните пропорции и съотношението се запазват непокътнати, предотвратявайки изкривяването на самото изображение. Изображението се поставя в прозореца възможно най-голям, така че цялата повърхност на прозореца да е покрита. Това означава, че няма да имате празни петна на вашата страница или изкривяване на изображението, но също така означава, че част от изображението може да бъде отрязано в зависимост от съотношението на екрана и изображението в въпрос. Например ръбовете на изображение (отгоре, отдолу, отляво или отдясно) могат да бъдат отрязани върху изображенията, в зависимост от това кои стойности използвате за свойството background-position. Ако ориентирате фона към "горе вляво", излишъкът върху изображението ще се отдели от долната и дясната страна. Ако центрирате фоновото изображение, излишъкът ще се отдели от всички страни, но тъй като този излишък е разпръснат, въздействието върху която и да е страна ще бъде по-малко сервирано.
Как да използвам 'background-size: cover;'
Когато създавате фоново изображение, е добра идея да създадете изображение, което е доста голямо. Докато браузърите могат да направят изображението по-малко, без осезаемо въздействие върху визуалното качество, когато браузърът мащабира изображението до размер, по-голям от оригиналните размери, визуалното качество ще се влоши, ще стане размазано и пикселизиран. Недостатъкът на това е, че страницата ви постига хит, когато доставяте гигантски изображения на всички екрани. Когато правите това, уверете се, че правилно подгответе тези изображения за скорост на изтегляне и уеб доставка. В крайна сметка трябва да намерите щастливия носител между достатъчно голям размер и качество на изображението и разумен размер на файла за скорост на изтегляне.
Един от най-често срещаните начини за използване на мащабиране на фонови изображения е, когато искате това изображение да заема целия фон на страница, независимо дали тази страница е широка и гледа ли се на настолен компютър или много по-малка и се изпраща на ръчен мобилен телефон устройства.
Качете вашето изображение на вашия уеб хост и го добавете към вашия CSS като фоново изображение:
фоново изображение: url (фойерверки-над-wdw.jpg);
background-repeat: no-repeat;
фон-позиция: център център;
фон-прикачен файл: фиксиран;
Първо добавете CSS с префикс на браузъра:
-webkit-background-size: корица;
-moz-background-size: корица;
-o-background-size: корица;
След това добавете CSS свойството:
размер на фона: корица;
Използване на различни изображения, които отговарят на различни устройства
Докато отзивчивият дизайн за настолен компютър или преносим компютър е важен, разнообразието от устройства, който има достъп до мрежата, се е увеличил значително и се предлага по-голямо разнообразие от размери на екрана че.
Както вече споменахме, зареждането на много голямо отзивчиво фоново изображение на смартфон, например, не е ефективен или съобразен с честотната лента дизайн.
Научете как можете да използвате медийни заявки за обслужване на изображения, които ще бъдат подходящи за устройствата, на които ще бъдат показани, и допълнително подобряване на съвместимостта на вашия уеб сайт с мобилни устройства.