CSS Multiple Backgrounds
В этой главе вы узнаете, как добавить несколько фоновых изображений в один элемент.
Вы также узнаете о следующих свойствах:
background-sizebackground-originbackground-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 | Определяет размер фонового изображения (ов) |