Несколько фонов CSS
В этой главе вы узнаете, как добавить несколько фоновых изображений к одному элементу.
Вы также узнаете о следующих свойствах:
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позволяет указать размер фоновых изображений.
Размер можно указать в длинах, процентах или с помощью одного из двух ключевых слов: содержать или покрывать.
Следующий пример изменяет размер фонового изображения, делая его намного меньше исходного изображения (используя пиксели):
Поблагодари его за боль
Боль сама по себе любовь
Вот почему это для малейшего, кто наша обычная практика терпит, чтобы воспользоваться последствиями
Вот код:
Пример
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Двумя другими возможными значениями для background-sizeявляются contain
и cover.
Ключевое containслово масштабирует фоновое изображение настолько, насколько это возможно (но его ширина и высота должны соответствовать области содержимого). Таким образом, в зависимости от пропорций фонового изображения и области позиционирования фона могут быть некоторые области фона, которые не покрыты фоновым изображением.
Ключевое coverслово масштабирует фоновое изображение так, чтобы область содержимого полностью закрывалась фоновым изображением (его ширина и высота равны или превышают область содержимого). Таким образом, некоторые части фонового изображения могут быть не видны в области позиционирования фона.
Следующий пример иллюстрирует использование containand 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> всегда не меньше высоты окна браузера). Затем установите для него фиксированный и центрированный фон. Затем отрегулируйте его размер с помощью свойства background-size:
Пример
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Изображение героя
Вы также можете использовать различные свойства фона в <div>, чтобы создать главное изображение (большое изображение с текстом) и поместить его в нужное место.
Пример
.hero-image {
background: url(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(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
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |