Множественные фоны CSS

В этой главе вы узнаете, как добавить несколько фоновых изображений к одному элементу.

Вы также узнаете о следующих свойствах:

  • background-size
  • background-origin
  • background-clip

Множественные фоны CSS

CSS позволяет вам через background-image Свойство добавляет несколько фоновых изображений для одного элемента.

Разные фоновые изображения отделяются запятыми и накладываются друг на друга, при этом первое изображение находится ближе к наблюдателю.

В следующем примере есть два фоновых изображения: первое изображение - цветы (сбоку и снизу), второе изображение - фоновое изображение бумаги (слева и сверху):

пример

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Попробуйте сами

Множественные фоновые изображения можно использовать с помощью отдельного свойства фона (как указано выше) или background Кратные свойства для указания.

В следующем примере используется: background Кратные свойства (результат соответствует примеру выше):

пример

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(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(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 Свойство также принимает несколько значений для установки размера фона (список, разделенный запятыми)

В этом примере указаны три фоновых изображения, каждое из которых имеет различное значение background-size:

пример

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Попробуйте сами

Полное фоновое изображение

Теперь, мы хотим, чтобы фоновое изображение на сайте всегда покрывало весь браузер

Конкретные требования такие:

  • Изображение заполняет всю страницу (без пробелов)
  • Изображение масштабируется по мере необходимости
  • Центрирует изображение на странице
  • не вызывает полосы прокрутки

ниже приведен пример того, как это можно сделать: использовать элемент <html> (элемент <html> всегда по крайней мере такой же высоты, как окно браузера). Затем установите фиксированный и centrальный фон. В конце настройте размер с помощью свойства background-size:

пример

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Попробуйте сами

Hero Image

Вы также можете использовать различные свойства фона в <div> для создания Hero Image (большое изображение с текстом) и разместить его в нужном месте.

пример

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Попробуйте сами

Свойство background-origin CSS

CSS background-origin свойство определяет положение изображения фона.

Этот атрибут принимает три различных значения:

  • border-box - изображение фона начинается с верхнего левого края рамки
  • padding-box - изображение фона начинается с верхнего левого края отступа (по умолчанию)
  • content-box - изображение фона начинается с верхнего левого угла содержимого

ниже приведен пример: background-origin свойства:

пример

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Попробуйте сами

Свойство background-clip CSS

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 Определяет размер фона изображения.