Посмотрите на популярные сайты сегодня, и одно дизайнерское лечение, которое вы обязательно увидите, - это большие, покрывающие экран фоновые изображения. Одна из проблем с добавлением этих изображений заключается в том, что веб-сайты должны реагировать на различные размеры и устройства экрана - подход, известный как отзывчивый веб-дизайн.
Поскольку макет вашего веб-сайта изменяется и масштабируется с разными размерами экрана, так же, как и эти фоновые изображения, соответственно масштабируют их размер. Фактически, эти «жидкие изображения» являются одной из ключевых частей чувствительных веб-сайтов (наряду с жидкостной сеткой и медиа-запросами). Эти три части были основным продуктом адаптивного веб-дизайна с самого начала, но в то время как всегда было довольно легко добавлять отзывчивые встроенные изображения на сайт (встроенные изображения - это графики, которые кодируются как часть разметки HTML), делая то же, что и фоновые изображения (которые стилизованы на странице с использованием свойств фона CSS) уже давно стали серьезной проблемой для многих веб-дизайнеров и разработчиков интерфейсов. К счастью, добавление свойства «background-size» в CSS позволило сделать это возможным.
В отдельной статье я рассказал о том, как использовать свойство CSS3 фон-размер растягивать изображения, чтобы вписаться в окно, но есть еще лучший, более полезный способ развертывания для этого свойства. Для этого мы будем использовать следующую комбинацию свойств и значений:
размер фона: обложка;
покрытие свойство keyword указывает браузеру масштабировать изображение, чтобы оно соответствовало окну, независимо от того, насколько оно велико или мало. Изображение масштабируется для охвата всего экрана, но исходные пропорции и соотношение сторон остаются неизменными, что препятствует искажению изображения. Изображение помещается в окно как можно больше, чтобы покрыть всю поверхность окна. Это означает, что у вас не будет никаких пятен на вашей странице или каких-либо искажений на изображении, но это также означает, что некоторые изображения могут быть обрезаны в зависимости от соотношения сторон экрана и соответствующего изображения. Например, края изображения (сверху, снизу, слева или справа) могут быть обрезаны на изображениях, в зависимости от того, какие значения вы используете для свойства background-position. Если вы ориентируете фон на «верхний левый», любой избыток изображения будет снижаться с нижней и правой сторон. Если вы центрируете фоновое изображение, избыток сойдет со всех сторон, но поскольку это превышение будет распространено, воздействие на любую сторону будет меньше.
Как пользоваться размер фона: обложка;
При создании фонового изображения неплохо создать изображение, которое довольно велико. В то время как браузеры могут сделать изображение меньше без заметного влияния на визуальное качество, когда браузер масштабирует изображение до размера, большего, чем его первоначальные размеры, качество изображения будет ухудшено, становится размытым и пиксельным. Недостатком этого является то, что ваша страница получает удар производительности, когда вы отправляете гигантские изображения на все экраны. Когда вы это сделаете, обязательно подготовьте эти изображения для скорости загрузки и доставки в Интернете. В конце концов, вам нужно найти счастливую среду между достаточно большим размером и качеством изображения и разумным размером файла для скорости загрузки.
Одним из распространенных способов использования масштабирования фоновых изображений является то, когда вы хотите, чтобы это изображение занимало полный фон страницы, является ли эта страница широкой и просматривается на настольном компьютере или намного меньше и отправляется на карманный, мобильный устройства.
Загрузите свое изображение на свой веб-хостинг и добавьте его в свой CSS в качестве фонового изображения:
background-image: url (fireworks-over-wdw.jpg);background-repeat: no-repeat;background-position: центр;background-attachment: fixed;
Сначала добавьте браузер с префиксом CSS:
-webkit-background-size: обложка;-moz-background-size: обложка;-o-background-size: обложка;
Затем добавьте свойство CSS:
размер фона: обложка;
Использование различных изображений, которые подходят для разных устройств
Хотя отзывчивый дизайн для настольных компьютеров или ноутбуков имеет важное значение, разнообразие устройств, которые могут получить доступ к Интернету, значительно выросло, и с этим связано большее разнообразие размеров экрана.
Как упоминалось ранее, загрузка очень большого отзывчивого фонового изображения на смартфоне, например, не является эффективной или учитывающей пропускную способность конструкцией.
Узнайте, как вы можете использовать медиа-запросы для обслуживания изображений, которые будут соответствовать устройствам, на которых они будут отображаться, и далее улучшить совместимость вашего веб-сайта с мобильными устройствами.
