ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Несколько фонов


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

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

  • 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 позволяет указать размер фоновых изображений.

Размер можно указать в длинах, процентах или с помощью одного из двух ключевых слов: 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 также принимает несколько значений для размера фона (используя список через запятую), при работе с несколькими фонами.

В следующем примере указаны три фоновых изображения с разными значениями фона для каждого изображения:

Пример

#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 Расширенные свойства фона

Свойство Описание
background Сокращенное свойство для установки всех свойств фона в одном объявлении
background-clip Определяет область рисования фона
background-image Определяет одно или несколько фоновых изображений для элемента
background-origin Определяет, где расположены фоновые изображения
background-size Определяет размер фонового изображения