CSS Multiple Backgrounds
В этой главе вы узнаете, как добавить несколько фоновых изображений в один элемент.
Вы также узнаете о следующих свойствах:
background-size
background-origin
background-clip
CSS несколько фонов
CSS позволяет добавлять несколько фоновых изображений для элемента через свойство background-image
.
Различные фоновые изображения разделяются запятыми, и изображения укладываются поверх друг друга, где первое изображение ближе всего к зрителю.
В следующем примере имеется два фоновых изображения, первое изображение — цветок (выровненный по нижнему и правому краю), а второе изображение представляет собой бумажный фон (выровненный по левому верхнему углу):
Пример
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Несколько фоновых изображений могут быть указаны с помощью отдельных свойств фона (как указано выше) или background
Сокращенное свойство.
В следующем примере используется сокращенное свойство background
(тот же результат, что и в примере выше):
Пример
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
Размер фона CSS
Свойство CSS background-size
позволяет задать размер фоновых изображений.
Размер может быть указан в длинах, процентах или с помощью одного из двух ключевых слов: содержать или охватывать.
В следующем примере размер фонового изображения значительно меньше исходного изображения (с использованием пикселов):
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(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Двумя другими возможными значениями для background-size
являются contain
и cover
.
Ключевое слово contain
масштабирует фоновое изображение так, чтобы оно было максимально большим (но и его ширина, и его высота должны уместиться внутри области содержимого). Таким образом, в зависимости от пропорций фонового изображения и области расположения фона, могут быть некоторые области фона, которые не охватываются фоновым изображением.
Ключевое слово cover
масштабирует фоновое изображение таким образом, что область содержимого полностью покрывается фоновым изображением (ширина и высота которого равны или превышают область содержимого). Таким образом, некоторые части фонового изображения могут не отображаться в области фонового позиционирования.
В следующем примере демонстрируется использование contain
и cover
:
Пример
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Определение размеров нескольких фоновых изображений
Свойство background-size
также принимает несколько значений для размера фона (с помощью списка с разделителями-запятыми) при работе с несколькими фоновыми рисунками.
В следующем примере задано три фоновых изображения с разным значением размера фона для каждого изображения:
Пример
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Полный размер фоновое изображение
Теперь мы хотим иметь фоновое изображение на веб-сайте, который охватывает все окна браузера в любое время.
Требования таковы:
- Заполните всю страницу изображением (без пробелов)
- Масштабирование изображения по мере необходимости
- Центрировать изображение на странице
- Не вызывать полосы прокрутки
В следующем примере показано, как это сделать; Используйте элемент HTML (HTML-элемент всегда по крайней мере высота окна браузера). Затем установите фиксированный и центрированный фон на нем. Затем настройте его размер с помощью свойства "размер фона":
Пример
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
}
CSS фон-происхождение свойства
Свойство CSS background-origin
указывает, где расположено фоновое изображение.
Свойство принимает три различных значения:
- border-box - фоновое изображение начинается с верхнего левого угла границы
- padding-box - (по умолчанию) фоновое изображение начинается с верхнего левого угла края отступа
- content-box - фоновое изображение начинается с верхнего левого угла содержимого
В следующем примере демонстрируется свойство background-origin
:
Пример
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
CSS фон-клип свойство
The 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 | Определяет размер фонового изображения (ов) |