Добавить два фона к одному объекту на 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, где не секрет, что носит универсальных характер, с присутствием свойством блочных элементов. Когда вы присваиваете к тегу селектора класс, то появляется возможность использовать их в большом количестве для одной странице, где могут быть разные фоны, но при этом не один стиль не будет пересекаться, все благодаря заданным классам. Также можете сделать для себя оригинальные линию, как все создается, то описано в этом материале в подробностях. |
Поделиться в социальных сетях
Материал разместил
Комментарии: 0 | |