CSS Несколько фонов
В этой главе вы узнаете, как добавить несколько фоновых изображений к одному элементу.
Вы также узнаете о следующих свойствах:
background-sizebackground-originbackground-clip
CSS Множество фоновых изображений
CSS позволяет добавлять несколько фоновых изображений для элемента через свойство background-image.
Различные фоновые изображения разделены запятыми, и изображения накладываются друг на друга, где первое изображение находится ближе всего к зрителю.
В следующем примере есть два фоновых изображения, первое изображение - цветок (выровненный по нижнему и правому краям), а второе изображение - фон бумаги (выровненный по верхнему левому углу):
Пример
#example1 {
background-image: url(../images/img_flwr.gif), url(../images/paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Попробуйте сами »
Несколько фоновых изображений можно указать, используя либо отдельные свойства фона (как указано выше), либо сокращенное свойство background.
В следующем примере используется сокращенное свойство background (тот же результат, что и в примере выше):
Пример
#example1 {
background: url(../images/img_flwr.gif) right bottom
no-repeat, url(../images/paper.gif) left top repeat;
}
Попробуйте сами »
CSS Размер фона
CSS свойство background-size позволяет указать размер фоновых изображений.
Размер можно указать в длинах, процентах или с помощью одного из двух ключевых слов: contain или cover.
В следующем примере фоновое изображение изменяется в размерах значительно меньше исходного изображения (с использованием пикселей):
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Вот код:
Пример
#div1
{
background: url(../images/img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Попробуйте сами »
Два других возможных значения для background-size это contain и cover.
Ключевое слово contain масштабирует фоновое изображение до максимально возможного размера (но его ширина и высота должны вписываться в область содержимого). Таким образом, в зависимости от пропорций фонового изображения и области расположения фона, могут быть некоторые области фона, которые не покрыты фоновым изображением.
Ключевое слово cover масштабирует фоновое изображение таким образом, чтобы область содержимого полностью покрывалась фоновым изображением (его ширина и высота равны или превышают область содержимого). По существу, некоторые части фонового изображения могут быть не видны в области расположения фона.
Следующий пример иллюстрирует использование contain и cover:
Пример
#div1
{
background: url(../images/img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(../images/img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Попробуйте сами »
Определить размеры нескольких фоновых изображений
Свойство background-size также принимает несколько значений для размера фона
(используя список через запятую), при работе с несколькими фонами.
В следующем примере указаны три фоновых изображения с разными значениями фона для каждого изображения:
Пример
#example1 {
background: url(../images/img_tree.gif) left top
no-repeat, url(../images/img_flwr.gif) right bottom no-repeat, url(../images/paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Попробуйте сами »
Полноразмерное фоновое изображение
Теперь мы хотим, чтобы на веб-сайте было фоновое изображение, которое постоянно покрывало бы все окно браузера.
Требования следующие:
- Заполнить всю страницу с изображением (без пробелов)
- Масштабировать изображение по мере необходимости
- Центрировать изображение на странице
- Не вызывать полосы прокрутки
В следующем примере показано, как это сделать; используйте элемент <html> (элемент <html> всегда равен по крайней мере высоте окна браузера). Затем установите фиксированный и центрированный фон. Затем настройте его размер с помощью свойства background-size:
Пример
html {
background: url(../images/img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Попробуйте сами »
Образ героя
Вы также можете использовать различные свойства фона для <div>, чтобы создать образ героя (большое изображение с текстом) и разместить его там, где вы хотите.
Пример
.hero-image {
background: url(../images/img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
Попробуйте сами »
CSS свойство background-origin
CSS свойство background-origin указывает, где расположено фоновое изображение.
Свойство принимает три разных значения:
- border-box - фоновое изображение начинается с верхнего левого угла рамки
- padding-box - (по умолчанию) фоновое изображение начинается с верхнего левого угла края отступа
- content-box - фоновое изображение начинается с верхнего левого угла содержимого
В следующем примере показано свойство background-origin:
Пример
#example1
{
border: 10px solid black;
padding: 35px;
background: url(../images/img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Попробуйте сами »
CSS свойство background-clip
CSS свойство background-clip определяет область рисования фона.
Свойство принимает три разных значения:
- border-box - (по умолчанию) фон закрашивается до внешнего края границы
- padding-box - фон закрашивается до внешнего края отступа
- content-box - фон закрашивается внутри поля содержимого
В следующем примере показано свойство background-clip:
Пример
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Попробуйте сами »
Проверьте себя с помощью упражнений!
CSS Расширенные свойства фона
| Свойство | Описание |
|---|---|
| background | Сокращенное свойство для установки всех свойств фона в одном объявлении |
| background-clip | Определяет область рисования фона |
| background-image | Определяет одно или несколько фоновых изображений для элемента |
| background-origin | Определяет, где расположены фоновые изображения |
| background-size | Определяет размер фонового изображения |
