От автора: с помощью CSS можно устанавливать множественный фон элементов. С помощью background-color можно залить фон однотонным цветом, с помощью background-image – залить фон изображением. А можно и то и другое.
|
1 2 3 4 |
body { background-color: red; background-image: url(pattern.png); } |
Ниже показан пример, где я использую в качестве фона SVG изображение, вставленное прямо в CSS через data URL.
Это одно повторенное изображение. Однако если необходимо, мы можем установить несколько фонов. Для этого необходимо разделить значения запятой.
|
1 2 3 4 5 |
body { background-image: url(image-one.jpg), url(image-two.jpg); } |
Если оставить как есть, image-one.jpg будет повторяться и полностью закроет image-two.jpg. Мы можем контролировать изображения отдельно с помощью других свойств фона.
|
1 2 3 4 5 6 7 8 9 10 |
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
Источник: //css-tricks.com/
Редакция: Команда webformyself.
