Как сделать двойной background
CSS3. Работа с множественными фонами
Мы уже ранее затрагивали возможности модуля CSS3 Backgrounds and Borders, рассматривая работу с тенями (box-shadow). Сегодня мы немного поговорим о еще одной интересной возможности — использовании нескольких изображений в фоне.
Композиция фонов
Классический подход
Итак, нам нужно разместить несколько фоновых изображений одно над другим. Как обычно решается эта задача? Очень просто: на каждое фоновое изображение создается блок, которому прописывается соответствующее фоновое изображение. Блоки либо вкладываются друг в друга, либо размещаются подряд с соответствующими правилами позиционирования. Вот простой пример:
Блок с классом «fishing» внутри «mermaid» исключительно для демонстрационных целей.
Теперь немного стилей:
Результат: 
В данном примере три вложенных фона и один блок с рыбками, расположенный рядом с «фоновыми» блоками. В теории, рыбок можно перемещать, например, с помощью JavaScript или CSS3 Transitions/Animations.
Кстати, в этом примере для «.fishing» используется новый синтаксис для позиционирования фона, также определенный в CSS3:
На текущий момент он поддерживается в IE9+ и Opera 11+, но не поддерживается в Firefox 10 и Chrome 16. Так что пользователи последних двух браузов поймать рыбку пока не смогут.
Поехали дальше. Как упростить эту конструкцию?
Множественные фоны
На помощь приходит новая опция, добавленная в CSS3, — возможность определять сразу несколько фоновых изображений для одного элемента. Выглядит это следующим образом:
И соответствующие стили:
Для определения множественных изображений необходимо использовать правило background-image, перечисляя отдельные изображения через запятую. Дополнительными правилами, также списком, можно задать позиционирование, повторы и другие параметры для каждого из изображений. Обратите внимание на порядок перечисления изображений: слои перечисляются слева направо от самого верхнего к самом нижнему.
Результат полностью совпадает: 
Одним правилом
Если рыбок не нужно выделять в отдельный блок для последующих манипуляций, всю картинку можно переписать одним простым правилом:
Картинку с результатом приводить не буду — поверьте, она совпадает с двумя картинками выше. А вот на стили обратите внимание еще раз, особенно на «background-repeat» — согласно спецификации, если часть списка в конце пропущена, то браузер должен повторить указанный список нужное число раз, чтобы соответствовать количеству изображений в списке.
В данном случае, это эквивалентно такому описанию:
Еще короче
Если вы помните CSS 2.1, в нем определена возможность описывать фоновые изображения в краткой форме. Как на счет множественных изображений? Это также возможно:
Но обратите внимание, что теперь пропускать просто так значения нельзя (если только они не совпадают со значением по умолчанию). Кстати, если вы хотите задать цвет фонового изображения, это надо делать в самом последнем слое.
Динамичные изображения
Если композиция статична или динамична не более, чем в зависимости от размеров контейнера, тогда множественные фоны очевидно упрощают конструкцию страницы. А что делать, если с отдельными элементами композиции нужно работать независимо из javascript (перемещать, прокручивать и т.п.)?
Кстати, вот пример из жизни — тема с одуванчиком в Яндексе:
Если вы залезете в код, вы увидите там примерно следующее:
Блоки с классами «b-fluff-bg», «b-fluff__cloud» и «b-fluff__item» содержат фоновые изображения, накладывающиеся друг на друга. Причем фон с облаками постоянно прокручивается, а одуванчики летают по экрану.
Можно ли это переписать с использованием множественных фонов? В принципе, да, но при условии 1) поддержки этой возможности в целевых браузерах и… 2) читайте дальше 😉
Как добавить динамики множественным фонам? В такой ситуации оказывается удобным, что во внутреннем представлении браузер раскидывает отдельные параметры фоновых изображения по соответствующим правилам. Например, для позиционирования есть «background-position», и для сдвигов достаточно изменять только его. Однако имеется и плата за использование множественных изображений — в этом правиле (и любом аналогичном) необходимо перечислять позицию для всех фонов, заданных для вашего блока, и нельзя сделать это выборочно.
Чтобы добавить нашему фону с рыбками анимации, можно использовать такой код:
И, кстати, анимации также можно делать через CSS3 Transitions/Animations, но это тема для отдельного обсуждения.
Паралакс и интерактив
Наконец, схожими маневрами можно легко добавить эффекты паралакса или интерактивного взамодействия с фоном:
Множественные фоновые изображения удобны в подобных сценариях, так как пока мы говорим только про фон (а не контент), их использование позволяет избежать замусоривания html-кода и DOM. Но за все приходится платить: я не могу обращаться к отдельным элементам композиции по имени, id, классу или какому либо другому параметру. О порядке элементов в композиции я должен явно помнить в коде и на каждое изменение любого параметра любого элемента фактически я должен склеивать строку, описывающую значения этого параметра для всех элементов, и обновлять ее для всей композиции.
Уверен, что это можно обернуть в удобный код на javascript, который возьмет на себя виртуализацию взаимоотношений с отдельными слоями, оставляя при этом html-код страницы максимально чистым.
Что там с совместимостью?
Все современные версии популярных браузеров, включая IE9+, поддерживают множественные изображения (можно сверяться, например, с сaniuse).
Вы также можете использовать Modernizr, чтобы предоставлять браузерам, не поддерживающим множественные фоны, альтернативные решения. Как написал Chris Coyier в заметке о порядке слоев при использовании множественных фонов, делайте примерно так:
Если вас смущает использование JS для предоставления обратной совместимости, вы можете просто дважды объявить background, правда, это тоже имеет свои минусы в виде возможной двойной загрузки ресурсов (это зависит от реализации обработки css в конкретном браузере):
Если вы уже начали думать о Windows 8 имейте в виду, что вы можете использовать множественные фоны при разработке metro style приложений, так как внутри используется тот же движок, что и в IE10.
Как сделать двойной background
Сегодня, практически в каждом дизайне сайта присутствует красивая background картинка.
Каждый верстальщик знает, что самый простой способ создания дизайна – лучшее, что может быть. Одним из простых и удобных техник является растягивание background на весь экран, с помощью нескольких строк css кода.
Казалось бы, мелочь, но все же, порой нужно сотворить что-то сложное простым способом. Например, реализовать несколько background с индивидуальными параметрами, без использования вспомогательных div блоков. То есть, сохраняя семантическую верстку.
В этой статье мы рассмотрим синтаксис кода, который поддерживает несколько background (multiple backgrounds) в одном элементе. Вот, как это смотрится в реалии:
CSS код для multiple backgrounds
Несколько background картинок реализуются с помощью нескольких значений css параметра background, которые разделены комой:
Я пытался сделать так же, с помощью краткого кода. К сожалению, не работает.
Плюс к этому, можно использовать другие свойства background (background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size). Так же, как и в CSS градиентах.
Вот и все! Надеюсь вам понравилась эта техника создания нескольких background, без использования каких либо вспомогательных элементов. Чистый семантический код.
Если у вас остались вопросы, замечания или предложения по поводу данной техники создания multiple backgrounds – пишите в комментарии. Также, хотелось бы провести тест на кроссбраузерность. Просьба, всем кто будет использовать (использует) данную технику, написать в комментарии, как это работает в разных браузерах (которыми вы пользуетесь).
Дальше: Как заработать на блоге? Пошаговая инструкция по заработку на блоге.
Дискуссия по теме 3 Комментария
День добрый! Почему то отображается только один фон. Не знаю что делать.
Sipth 16.03.2015 в 12:15
В CSS 2 добавить одновременно два фона к одному элементу нереально, поэтому приходится вкладывать один элемент внутрь другого и для каждого задавать свой собственный фоновый рисунок. Для сложных макетов таких вложений иной раз можно насчитать около десятка. Понятно, что ни к чему хорошему такое нагромождение не приводит, но что делать? Оказывается, есть что! В CSS 3 можно одновременно добавлять несколько фоновых рисунков для любого элемента. Так что берем рисунок блока (рис. 1), режем его на части и начинаем тестировать в браузерах.
Рис. 1. Блок для сайта
Для простоты, ширину блока возьму фиксированного размера, а высота будет тянуться в зависимости от контента. По рисунку хорошо видно верхнюю и нижнюю часть, вырезаю в редакторе и складываю пластами в отдельном файле. Среднюю часть надо выбрать так, чтобы она повторялась без швов по вертикали. Рисунок имеет хорошо выраженный повторяющийся орнамент, так что трудностей с выделением быть не должно. Копирую и вставляю к предыдущим фрагментам. В итоге получится такая картинка (рис.
Можно ли применить несколько цветов фона с помощью CSS3?
Рис. 2. Подготовленные изображения
В принципе, можно сохранить каждый фрагмент в виде отдельного файла, но у CSS-спрайтов (так называется технология склейки нескольких изображений в одно) есть ряд преимуществ. Во-первых, сокращается количество запросов к серверу из-за сокращения количества файлов и, во-вторых, рисунки в сумме загружаются и отображаются быстрее.
Сам фон выводится свойством background, оно же задает и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую, и в данном случае имеет значение их порядок. Мне требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставлю их первыми (пример 1).
Пример 1. Несколько фоновых картинок
HTML5CSS2.1CSS3IE 8IE 9CrOpSaFx
Первый фон выводит верхнюю границу блока, второй фон — нижнюю, а третий вертикальные границы.
Проверяем в браузерах. Internet Explorer 8 вообще не вывел никаких рисунков, остальные браузеры (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) отобразили рамку корректно (рис. 3).
Рис. 3. Вид рамки в браузере Safari
С использованием множественных фонов ситуация для разработчиков существенно облегчается, особенно при верстке блоков. Остается только одна мелочь. Надо чтобы браузер IE 6–8 прекратил свое существование.
Продвинутые эффекты с помощью режимов наложения фона CSS
Дата публикации: 2018-09-17
От автора: если изображение стоит тысячи слов, то наложение фонов CSS друг на друга должно стоить еще больше. Аналогично, возможности дизайна, которые открываются с помощью режимов смешивания в CSS, скорее всего, больше, чем вы можете себе представить.
Когда вы слышите о CSS Blend Modes, как правило люди упоминают о трех новых свойствах CSS, которые получили довольно хорошую поддержку в современных браузерах. Эти свойства включают:
background-blend-mode — для смешивания фоновых изображений элемента, градиентов и цветов фона
mix-blend-mode — для наложения элементов друг на друга и, наконец,
isolation — менее используемое свойство, используемое в режиме mix-blend, для смешивания элементов.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Эта статья будет посвящена background-blend-mode, свойству с наилучшей поддержкой, и тому, как вы можете использовать его сегодня для создания привлекательных фонов и фотоэффектов для своего сайта, которые когда-то были возможны только в Photoshop.
Объединение градиентов CSS в режиме background-blend-mode
Свойство background — это то, где мы можем использовать градиенты CSS. Такие функции, как linear-gradient(), radial-gradient(), и разновидности этих двух repeating-linear-gradient() и repeating-radial-gradient(), имеют повсеместную поддержку и более критически стандартизованный синтаксис в браузерах.
Но свойство background также может принимать более одного градиента, отображаемого поверх другого, причем каждая функция разделяется запятой. Лея Веру продемонстрировала впечатляющие узоры, которые можно создать с помощью этой техники: от шахматных досок, до кирпичей и звезд.
Но теперь, когда у нас есть свойство background-blend-mode, мы можем создавать еще более продвинутые градиенты и узоры.
Спектральный фон
Наложим три градиента, чтобы создать фон с почти полным спектром цветов, которые можно отобразить на мониторе.
Приведенный выше эффект ранее был возможен только с помощью изображения размером в десятки килобайт. Но мы только что воспроизвели эффект с помощью CSS, размеров менее чем в 200 байт, не говоря уже об отсутствии лишнего HTTP-запроса.
Фон в виде пледа
Мы также можем создавать интересные узоры пледа с помощью градиентов и background-blend-mode.
Фон из кругов
Как насчет еще одного узора, на этот раз с помощью радиального градиента:
Другие фоны
С помощью Yoksel и Уны Кравец я подготовил коллекцию из 24 других смешанных градиентов, чтобы сделать ваш сайт привлекательным.
Фотоэффекты с помощью background-blend-mode
Хотя background-image позволяет нам устанавливать для элемента несколько градиентов, мы можем также установить несколько фоновых изображений с помощью синтаксиса url() почти таким же образом. Когда мы совмещаем это с background-blend-mode и такими свойствами, как filter, все может стать действительно интересным.
Эффект эскиза, нарисованного карандашом
Мы можем использовать CSS, чтобы изменить фотографию слева так, как будто она была нарисована карандашом на бумаге. Без Photoshop, холста HTML5, WebGL и JavaScript. Пять свойств CSS — это все, что нам нужно.
Хотя мы можем использовать другие элементы уровня блока, такие как body, section, figure, вот HTML, который мы используем для начала.
Давайте займемся стилями. Замените chapel.jpg на URL-адрес изображения, которое вы используете. Мы установим два фоновых изображения, и background-size для них — cover.
Ниже на первом квадрате показан результат нашего первого шага:
Теперь добавим режим смешивания: background-blend-mode: difference;
О нет, куда все исчезло? У нас остался совершенно черный квадрат. Режим смешивания difference берет два фона и вычитает пиксель за пикселем более темный цвет одного фона из более светлого цвета другого фона.
Если вы не совсем понимаете, что здесь происходит, давайте посмотрим, что произойдет, когда мы совсем немного сместим два фона с помощью background-position и calc().
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Через запятую мы устанавливаем две позиции фона, каждая из которых соответствует одной копии фонового изображения. Первое изображение, мы перемещаемся от центра по оси х влево на один пиксель и от центра по оси Y вверх на один пиксель. Для второй копии фонового изображения мы делаем обратное, смещаем ее вниз и вправо.
У нас есть два фоновых изображения, которые слегка смещены, но вся фотография по-прежнему расположена по центру нашего элемента. Теперь, когда режим смешивания difference обнаруживает различия между двумя изображениями, на фото проявились контуры. Довольно круто?
Наконец, мы используем свойство filter, чтобы инвертировать фотографию и задать для нее тона серого.
Для этой конкретной фотографии мы также увеличим яркость, что даст дополнительный эффект увеличения контрастности линий. Вот наш окончательный фрагмент CSS для этого эффекта:
Эффект грифельной доски
Мы можем воссоздать эффект грифельной доски, выполнив те же действия, что и для эффекта эскиза карандашом, а на последней шаге опустим функцию invert (1).
Эффект ночного видения
Давайте попробуем воссоздать еще один эффект с помощью режимов смешивания CSS и сделать фотографию, выглядящую, как будто мы смотрим через объектив прибора ночного видения.
Есть три части, которые мы будем смешивать с помощью режима смешивания overlay. Этот режим смешивания облегчает и затемняет фон, а также работает как комбинация двух других режимов смешивания, multiply и screen. Сначала мы настроим фоновое изображение, на этот раз одно.
Теперь добавим градиент и background-blend-mode. Здесь мы используем слегка прозрачный радиальный градиент от лимонного до черного.
Неплохо, не правда ли. Может быть, нам на этом и остановиться. У меня есть еще одна идея, которая может сделать эффект более аутентичным, это должно добавить линии искусственного сканирования на задний план с помощью повторяющегося градиента фона.
И в завершении полный CSS, используемый для этого эффекта:
Другие фотоэффекты
Я создал галерею из 20 CSS-эффектов изображения, которые вы можете использовать на своем веб-сайте.
Поддержка браузерами и резервные варианты
Хорошей новостью является то, что свойство background-blend-mode имеет полную поддержку в Firefox, Chrome и Opera.
Неплохой новостью является то, что оно имеет достаточную поддержку в Safari, которая позволяет реализовать все эффекты, рассмотренные нами здесь. В то же время Safari на сегодня не поддерживает режимы смешивание saturation, hue, color и luminosity.
Плохая новость заключается в том, что Internet Explorer и IE Edge не поддерживают ни одно свойство режимов смешивания CSS.
Это означает, что нам нужно отдельно рассматривать браузеры, которые еще не поддерживают режим background-blend-mode. Отличное правило CSS @supports позволяет сделать это довольно просто. Вот два примера.
В первом примере мы возьмем наш спектральный фоновый градиент и предоставим резервный вариант, если свойство background-blend-mode не поддерживается. Для этого примера мы используем в качестве резервного — background: gray;, но вместо этого можно использовать любой другой CSS.