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

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

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

 

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

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

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

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

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

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

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

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

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

Видите, как в 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree