• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Добавить два фона к одному элементу на CSS (Как добавить два фона к одному элементу с помощью CSS3)
Добавить два фона к одному элементу на CSS
Kosten
Дата: Пятница, 2019-10-11, 22:04 | Сообщение 1
Онлайн
Администраторы
Сообщений:24946
Награды: 57


Задача состоит в том, как можно корректно добавить несколько фоновых картинок, а точнее 3 изображение для блока при помощи CSS3. Здесь оказывается не все так сложно, как может изначально показаться, ведь нужно задействовать универсальное свойство background, где в начале задаем первый фон, и делаем запятую, и автоматически после нее прописываем второй фон, и вот как получается.

Где для примера создадим вертикальных линий, что с левой стороны, так и и справа от самого блока.



HTML

Код
  <div class="vonova-kartinka">
Valve представляет новую функцию в Steam, которая позволяет локальным многопользовательским играм транслироваться через Интернет.
  </div>

CSS

Код
body {
    background: #cecece; /* Цвет фона веб-страницы */
   }
   .vonova-kartinka {
    background: url(http://zornet.ru/ABVUN/Aba/detunis/bg_left.png) repeat-y,
                #f9f3f3 url(http://zornet.ru/ABVUN/Aba/detunis/bg_right.png) repeat-y 100% 0;
    padding: 10px; /* Поля вокруг текста */
   }

Так получилось при проверке:



Как можно заметить, что с картинками по сторонам прописаны цвета под фон, что самостоятельно под сайт настраиваются.
Прикрепления: 7985377.png(20.3 Kb) · 8109428.png(9.6 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 2019-10-11, 22:15 | Сообщение 2
Онлайн
Администраторы
Сообщений:24946
Награды: 57


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

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



Картинки находим сами, желательно формате PNG, чтоб можно расположить не смотря на основной стиль сайта.

Код
div {
    background:url(Изображение по вверх.png) no-repeat top center,
url(Изображение вниз.png) no-repeat bottom center;
    background-size:100%;
  }
Прикрепления: 9687575.jpg(28.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Добавить два фона к одному элементу на CSS (Как добавить два фона к одному элементу с помощью CSS3)
  • Страница 1 из 1
  • 1
Поиск: