| Kosten | Воскресенье, 07 Июля 2019, 23:47 | Сообщение 1 |
| Посмотрите на популярные сайты сегодня, и одна из дизайнерских разработок, где вы обязательно увидите, это будут большие фоновые изображения, которые охватывают весь экран. Одной из проблем с добавлением этих изображений является то, что веб-сайты должны реагировать на экран разных размеров и использовать разные устройства, известный как адаптивный веб-дизайн.
Одно изображение для многих экранов
Поскольку макет вашего веб-сайта изменяется и масштабируется с различными размерами экрана, эти фоновые изображения также должны масштабированья соответствующим образом. Эти три части были основой адаптивного веб-дизайна с самого начала, но, несмотря на то, что всегда было довольно легко добавлять адаптивные встроенные изображения на сайт, где встроенные изображения — это графика, которая кодируется как часть разметки HTML.
Создавая то же самое с фоновыми изображениями, которые встраиваются в страницу с использованием свойств фона CSS, где долгое время представляло собой серьезную проблему для многих веб-дизайнеров и разработчиков интерфейса.
Для этого мы будем использовать следующую комбинацию свойства и значения:
Код background-size: cover;
Ключевое свойство cover указывает браузеру масштабировать изображение, чтобы оно соответствовало окну, независимо от того, насколько оно велико или мало. Изображение масштабируется, чтобы покрыть весь экран, но с оригинальными пропорциями и пропорциями сохраняются в целости, предотвращая искажение самого изображения. Изображение помещается в окно как можно большего размера, чтобы покрыть всю поверхность окна.
Это означает, что у вас не будет никаких пустых пятен на вашей странице или каких-либо искажений на изображении. Но это также означает, что некоторые изображения могут быть обрезаны в зависимости от соотношения сторон экрана и рассматриваемого изображения. Например, края изображения, где сверху, снизу, слева или справа могут быть обрезаны на изображениях в зависимости от того, какие значения вы используете для свойства background-position.
Как использовать 'background-size: cover;
При создании фонового изображения рекомендуется создать довольно большое изображение. Хотя браузеры могут уменьшать изображение без заметного влияния на качество изображения, когда браузер масштабирует изображение до размера, превышающего его исходные размеры, качество изображения будет ухудшаться, становясь размытым и получая пиксели.
Недостатком этого является то, что ваша страница страдает от повышения производительности при доставке гигантских изображений на все экраны. Изначально правильно подготовили эти изображения для скорости загрузки и веб-доставки. В конце концов вам нужно найти удачное соотношение между достаточно большим размером и качеством изображения и приемлемым размером файла для скорости загрузки.
Один из распространенных способов масштабирования фоновых изображений — когда вы хотите, чтобы это изображение занимало весь фон страницы, независимо от того, является ли эта страница широкой и просматриваемой на настольном компьютере или значительно меньшего размера и отправляется на переносной мобильный телефон устройства.
Загрузите свое изображение на свой веб-хостинг и добавьте его в свой CSS как фоновое изображение:
Код background-image: url(Ссылка на изображение.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
Сначала добавьте браузер с префиксом CSS:
Код -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Затем добавьте свойство CSS:
Код background-size: cover;
Использование разных изображений, которые подходят для разных устройств
Хотя адаптивный дизайн для настольного компьютера или ноутбука важен, разнообразие устройств, которые могут получить доступ к сети, значительно возросло, и с этим связано большее разнообразие размеров экрана.
Как упоминалось ранее, загрузка очень большого адаптивного фонового изображения на смартфон, например не является эффективным или учитывающим пропускную способность дизайном.
| | Страна: (RU) |
| |
