• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Картинка в качестве фона сайта с помощью CSS (Как добавить фоновый рисунок на веб-страницу)
Картинка в качестве фона сайта с помощью CSS
Kosten
Дата: Воскресенье, 19.08.2018, 19:32 | Сообщение 1
Администраторы
Сообщений:18096
Награды: 55


При добавлении изображений в ваш дизайн, особенно если он будет реагировать, используйте тег div с backgroundсвойством CSS вместо img элементов. Это может показаться, что больше работы за бесценок, но это на самом деле делает его гораздо проще стиль изображения должным образом, сохраняя свой первоначальный размер и благодаря background-size, background-positionи другим свойствам.



HTML

Код
<section>
    <p>Элемент изображение</p>
    <img src="http://zornet.ru/ABVUN/sarunolas/milsagtugsa/bicycle.jpg" alt="bicycle">
</section>

<section>
    <p>Div с фоновым изображением</p>
    <div></div>
</section>


CSS

Код
img {
    width: 285px;
    height: 195px;
}

div {
    width: 285px;
    height: 195px;
    background: url('http://zornet.ru/ABVUN/sarunolas/milsagtugsa/bicycle.jpg');
    background-position: center center;
    background-size: cover;
}

section{
    float: left;
    margin: 15px;
}


Недостатком этого метода является то, что веб-доступность вашей страницы будет немного ударить, так как изображения не будут сканироваться должным образом с помощью экранных устройств и поисковых систем. Эта проблема может быть решена с помощью потрясающей привязки к объекту, но пока у нее нет полной поддержки браузера.

Где может показаться немного суровым, но аннулирование полей и прокладок на самом деле упрощает компоновку элементов, поскольку между ними не учитываются промежутки по умолчанию. Свойство box-sizing: border-box; является еще одним хорошим значением по умолчанию, который мы будем говорить о более в нашем следующем наконечнике.

Демонстрация
Прикрепления: 3191196.png(194.8 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Картинка в качестве фона сайта с помощью CSS (Как добавить фоновый рисунок на веб-страницу)
  • Страница 1 из 1
  • 1
Поиск: