Множественные фоны в css3. Основы

Множественные фоны в css3. Основы

От автора: с помощью CSS можно устанавливать множественный фон элементов. С помощью background-color можно залить фон однотонным цветом, с помощью background-image – залить фон изображением. А можно и то и другое.

 

body {
  background-color: red;
  background-image: url(pattern.png);
}

Ниже показан пример, где я использую в качестве фона SVG изображение, вставленное прямо в CSS через data URL.

Это одно повторенное изображение. Однако если необходимо, мы можем установить несколько фонов. Для этого необходимо разделить значения запятой.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
body {
  background-image: 
 url(image-one.jpg),
 url(image-two.jpg);
}

Если оставить как есть, image-one.jpg будет повторяться и полностью закроет image-two.jpg. Мы можем контролировать изображения отдельно с помощью других свойств фона.

body {
  background-image: 
 url(image-one.jpg),
 url(image-two.jpg);
  background-position:
 top right, /* this positions the first image */
 bottom left; /* this positions the second image */
  background-repeat:
 no-repeat; /* this applies to both images */
}

Видите, как в background-position значения также разделены запятой? Значения применятся отдельно к своему изображению. У background-repeat одно значение? Можно сделать 2 значения таким же путем, но если использовать одно – оно применится к обоим изображениям.

Пример использования 4 отдельных изображений, по одному на каждый угол со сдвигом:

Жаль, что нельзя вращать и переворачивать фоновые изображения, иначе можно было бы использовать одно. Однако мы можем вращать и переворачивать все элементы (и псевдоэлементы). Поэтому в таких случаях мы можем использовать одно изображение!

Необходимо знать:

Стек-порядок для нескольких фоновых изображений – первое всегда сверху

Градиенты применяются через background-image, поэтому их можно использовать с фоновыми изображениями. Например, поверх растрового изображения можно задать прозрачный градиент.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree