ZorNet.Ru — сайт для вебмастера » HTML и CSS » Добавить два фона к одному объекту на CSS

Добавить два фона к одному объекту на CSS

Добавить два фона к одному объекту на CSS
Давайте рассмотрим тему по добавление одного или два, а также несколько фоновых изображений, которые будут на одном элементе. Как только вышла новая специфика стилистики CSS3, то сразу появилась возможность под установку на заданный элемент блока, несколько фоновых изображений. Все это можно сделать при участии свойства background. Да, все верно, все происходит как было ранее, это указываем параметр под первое изображение, где после него выставляем знак запятую, все для того, чтоб прописать параметр на следующею картинку.

Как можно заметить, что не чего такого сверхъестественное здесь нет, все понятно и доступно. Остается только все закрепить, а это означает что нужно все рассмотреть на практике. Как пример, берем 2 горизонтальные линий, но с разным дизайном, для того, чтоб сделать оформление для данного описание.

Где одну линий расположен снизу, потом идет описание, и по вверх ставим следующее, или набором сверху в низ, кому как удобнее. И после чего получится красивый блок, где можно его задействовать как оформление, а по несущим знанием, то узнали как правильно объединить фоновые изображения на одном элементе.

CSS

Код
div {
  background:url(http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/0_bf796_e875c2f_L.png) no-repeat top center,
  url(http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/18476746.gif) no-repeat bottom center;
  background-size:100%;
  }

Ставим ссылки на линии по вашему усмотрению.

Вот так получиться:

Как можно добавить два фона к одному объекту?

Здесь нужно подчеркнуть, где будут находиться картинки, то больше всего здесь используют div, где не секрет, что носит универсальных характер, с присутствием свойством блочных элементов.

Когда вы присваиваете к тегу селектора класс, то появляется возможность использовать их в большом количестве для одной странице, где могут быть разные фоны, но при этом не один стиль не будет пересекаться, все благодаря заданным классам.

Также можете сделать для себя оригинальные линию, как все создается, то описано в этом материале в подробностях.
07 Сентября 2018 Просмотров: 1143 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar