Как добавить два фона к одному элементу через CSS3?
Добавить два фоновых изображения для блока с помощью CSS3.
Решение
Современные браузеры позволяют добавлять к элементу произвольное число фоновых изображений, перечисляя параметры каждого фона через запятую. Достаточно воспользоваться универсальным свойством background и указать для него вначале один фон и через запятую второй.
Для примера рассмотрим создание вертикальных декоративных линий слева и справа от блока. Для этого вначале подготовим изображения, которые должны без стыков повторяться по вертикали. На рис. 1 показана фоновая картинка, которая будет выводиться по левому краю, а на рис. 2 картинка для вывода по правому краю.
Рис. 1. Фоновая картинка для границы слева
Рис. 2. Фоновая картинка для границы справа
В качестве блочного элемента к которому добавляется фон, обычно используется тег в силу его удобства и универсальности, чтобы выделить его среди остальных элементов, к нему добавляется класс block (пример 1).
Пример 1. Два фоновых изображения
HTML5 CSS3 IE Cr Op Sa Fx
Два фоновых изображения
Результат данного примера показан на рис. 3.
Рис. 3. Вид блока с двумя фоновыми картинками
Несколько фоновых картинок
К одному элементу можно добавить сразу несколько фоновых изображений через единственное свойство background . Это позволяет обойтись одним элементом для создания сложного фона или одной картинкой, выводя её несколько раз с различными настройками. Все изображения со своими параметрами перечисляются через запятую, при этом вначале указывается картинка которая выводится поверх остальных изображений, а последней, соответственно, самая нижняя картинка. В примере 1 показано создание фона с тремя изображениями.
Пример 1. Три фона
Если требуется отдельно задать какое-то стилевое свойство для фона, вроде background-size как в примере выше, то параметры для каждого фона перечисляются через запятую. Результат данного примера показан на рис. 1.
Рис. 1. Фон с тремя изображениями
Отдельные изображения для фона позволяют менять их положение, а также анимировать, как показано в примере 2.
Пример 2. Анимированный фон
Подробнее про анимацию рассказывается далее.
Рассмотрим теперь как применять одну картинку для создания блока с рамкой (рис. 2). Ширина блока фиксированная, а высота тянется в зависимости от объёма содержимого блока.
Рис. 2. Рисованная рамка
На рисунке хорошо заметна верхняя и нижняя часть, которую требуется вырезать в графическом редакторе и расположить по горизонтали. Средняя часть выбирается таким образом, чтобы она повторялась без швов по вертикали. Картинка имеет выраженный повторяющийся орнамент, так что трудностей с выделением быть не должно. В итоге получится такое подготовленное изображение (рис. 3). Клетчатое поле обозначает прозрачность, оно позволяет задавать наряду с изображениями цветной фон и легко менять его через стили.
Рис. 3. Подготовленное для фона изображение
Сам фон выводится свойством background , оно же задаёт и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую и в данном случае имеет значение их порядок. Нам требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставим их первыми (пример 3). Цвет фона указывается последним.
Пример 3. Несколько фоновых картинок
Первый фон выводит верхнюю границу блока, второй фон — нижнюю, а третий вертикальные границы. Последним идёт цвет, который виден в прозрачной центральной части блока (рис. 4).
Рис. 4. Вид рамки
См. также
- background
- background-size
- Анимация ссылок при наведении
- Линейный градиент
- Масштабирование фона
- Спрайты
- Установка фона и градиента
- Фоновая картинка
Как сделать несколько фонов в background
В CSS3 появилась возможность указать в свойстве background несколько изображений (Multiple Backgrounds), при этом они будут накладываются друг на друга, первый по порядку фон будет выводится спереди, а последний сзади, поэтому только последнее свойство может содержать цвет фона.
Синтаксис позволяет указать фоновые изображения в сокращенном виде:
Так и в отдельных свойствах ( background , background-attachment , background-clip , background-image , background-origin , background-position , background-repeat , background-size ), за исключением background-color .
Пример использования multiple backgrounds
В примере используются три изображения, фон и два логотипа:
Множественные фоны
К элементам можно применить несколько фонов. Они накладываются друг на друга: фон, заданный первым, станет верхним, а заданный последним — нижним. Только последний фон может включать цвет фона.
Задавать множественные фоны легко:
.myclass background: background1, background2, /* …, */ backgroundN; >
Вы можете сделать это сокращённым свойством background и отдельными свойствами кроме background-color . Таким образом, следующие свойства могут быть определены в виде списка по одному на фон: background , background-attachment , background-clip , background-image , background-origin , background-position , background-repeat , background-size .
Пример
В этом примере заданы три фона: логотип Firefox, изображение пузырей и линейный градиент (en-US) :
HTML
div class="multi-bg-example">div>
CSS
.multi-bg-example width: 100%; height: 400px; background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; >
Результат
Как вы можете видеть, логотип Firefox (первый в списке background-image ) расположен сверху, далее идёт фон с пузырями и в самом низу градиент (указанный последним). Каждое последующее под-свойство ( background-repeat и background-position ) применяется к соответствующим фонам. Например, первое значение свойства background-repeat применяется к первому фону и т.д.
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 16 нояб. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Предыдущая запись