Способы создания перекрывающего слоя overlay

Overlay (оверлей), или перекрывающий слой - это слой, который обычно накладывают поверх фонового изображения для того, чтобы затемнить или осветлить его. Дизайнеры в макетах обычно создают его в виде векторного слоя с полупрозрачной заливкой. Цвет заливки зависит от цветов, использованных в макете.

Еще один вариант оверлея используют для создания модальных окон. В этом случае он перекрывает весь контент сайта, а выше него размещается только модальное, или pop-up окно.

В этой статье мы рассмотрим несколько способов создания оверлеев, т.е. перекрывающих слоев, которые закрывают только фоновое изображение. Контент же блока находится поверх оверлея и доступен для чтения, выделения и копирования информации.

Способ 1. Вкладываем перекрывающий слой overlay внутрь контейнера с заданной высотой

Очень часто необходимо добавить перекрывающий слой в такой блок, как header. За счет того, что в этот html-элемент, как правило добавляют большое фоновое изображение, которое собственно и нужно перекрыть слоем overlay, и совсем немного текста, для header обычно явно задают такое свойство, как height.  Внутри header в разметке размещают <div class="overlay">, а уже внутри него - всю остальную разметку.

В CSS-свойствах для header задают height и нужные свойства группы background, а для .overlay - padding, height: 100% и нужный цвет фона с полупрозрачностью в системе rgba() или hsla().

Однако здесь есть один подвох. Учтите, что по умолчанию браузер расчитывает ширину и высоту только для контента - за это отвечает свойство box-sizing со значением content-box. Поэтому, как только вы зададите padding-top или padding-bottom, в том числе и в виде свойства padding: 10px 0, для любого элемента с явно указанной высотой хоть в виде height: 500px, хоть в виде height: 100%, часть этого элемента у вас "вылезет" внизу за пределы родителя, т.к. любые padding добавляются к указанной вами высоте.

Поэтому для того, чтобы высота (да и ширина тоже) считались вместе с внутренними отступами, нужно указывать либо для .overlay свойство box-sizing: border-box, либо делать это для всех элементов с помощью универсального селектора в виде *. Поскольку в примерах ниже мы еще будем использовать и псевдоэлементы ::before и ::after, то имеет смысл сразу же написать это свойство и для них в таком виде:

Результат применения этого способа смотрим на примере (открыть в новой вкладке):

Способ 2. Использование отдельного слоя с отрицательными margin

Предположим, вам нужно задать внутренние отступы не в перекрывающем слое, а в основном. Тогда .overlay будет сдвинут вниз на величину этих отступов. Их можно компенсировать за счет отрицательных внешних отступов (margin).

CSS-свойства для этого блока таковы:

В данном примере для основного блока с классом white-bg задана высота в 500px и padding в 50px сверху и снизу. Вложенный в него элемент с классом overlay имеет ширину и высоту в 100%, а для того, чтобы компенсировать внутренние отступы в 50px используются отрицательные внешние отступы сверху и снизу в свойстве margin: -50px 0.

Как выглядит код, можно посмотреть ниже и открыть в новой вкладке.

Способ 3. Использование отдельного слоя с position: absolute

В этом случае разметка будет подобной:

CSS-код в этом случае похож только для section:

Обратите внимание на свойство position: relative для родительского элемента с классом comp-bg. У вложенного в него <div class="overlay"> задано свойство position: absolute. Эта связка позволяет разместить абсолютно позиционированный .overlay внутри его родительского элемента, а не внутри body. Кроме того, для оверлея заданы width и height в 100% и координаты top:0 и left:0. Поскольку элемент с классом overlay у нас имеет абсолютное позиционирование, его ширина и высота определяются либо контентом внутри него, либо css-правилами width и height для него. Поэтому задавать padding нужно только для него, т.к. весь остальной контент будет располагаться только исходя из размеров этого элемента и собственных отступов (margin для h1, p).

Пример, который можно открыть в новой вкладке.

Способ 4. Использование псевдоэлементов ::before или ::after с position: absolute

В этом случае в html-разметке нам не будет нужен дополнительный <div class="overlay">. Зато вместо него понадобится <div class="content">, который будет содержать весь текст:

В CSS-правилах записываем свойства, подобные предыдущим примерам, но обязательно добавляем для .music-bg свойство position: relative, т.к. для псевдоэлемента ::before необходимо будет задать свойство position: absolute. В данном примере мы используем псевдоэлемент ::before, т.к. здесь достаточно одного слоя, хотя аналогичные правила можно было бы записать и для псевдоэлемента  ::after.

Важно также задать для .content свойство position: relative, т.к. иначе абсолютно позиционированный псевдоэлемент ::before перекроет весь текст. Вы можете сами это посмотреть на примере ниже, нажав на кнопку с текстом "Remove position: relative for .content".

Пример (открыть в новой вкладке):

Способ 5: Использование множественного фона

В CSS3 появилась возможность добавлять сразу несколько изображений для одного элемента, перечисляя все свойства группы background через запятую. Например, так:

Поскольку однотонный фон можно заменить градиентом с  полупрозрачностью, то вместо одного из url() можно использовать linear-gradient(), причем сначала нужно указать параметры линейного (или радиального, если он вам больше подходит) градиента, а затем путь к изображению.

Этот способ особенно актуален тогда, когда нужно скрыть часть картинки, т.к. сверху должен быть текст, а другую оставить, как есть. Именно такой пример можно увидеть ниже или открыть в новой вкладке.

Код примера:

Попробуйте этот вариант и в том случае, если вам нужно использовать одноцветный оверлей. В этом случае вы указываете в свойстве linear-gradient() 2 одинаковых цвета с полупрозрачностью. Учтите, что если вам нужен в одной из областей прозрачный градиент, то вы можете получить неприятную серо-черную полосу в браузере Safari. О том, как этого не допустить, читайте здесь.

Способ 6: Использование position: fixed для overlay на всю высоту экрана

Особенностью свойства position со значением fixed является то, что элемент с таким свойством при указании координат размещается относительно окна просмотра вне зависимости от того, каково значение свойство position у его родительского элемента и фиксируется в этом месте. Указывать свойства position: fixed  для элемента с классом overlay очень удобно в том случае, когда прокрутка вам совсем не нужна, т.е. мы говорим о странице с небольшим количеством текста, которая занимает один экран. Разметка ее будет такой:

CSS-правила запишем так:

Вместо использования свойств width: 100% и   здесь мы указали все возможные координаты (top, bottom, left и right) равными 0, поэтому элемент растянулся на всю область просмотра.Сам пример выглядит следующим образом (открыть в новой вкладке):

За счет использования всех 4-х координат для фиксированного оверлея + высоту родительского элемента в 100vh мы получили растяжение его на все окно. В этом примере вы можете добавить еще один раздел (<section>) кликом на кнопке "Add Section", чтобы посмотреть, как оверлей распространяется на весь контент страницы, перекрывая его.

Варианты отображения оверлея при клике на кнопку

Достаточно часто оверлеи нужно создавать при клике на кнопке или ссылке для того, чтобы отобразить модальное окно. Вы можете посмотреть на варианты отображения оверлея в этом случае от Naoya. Для понимания кода вам нужно будет подключить jQuery.

See the Pen CSS Overlay Effects by Elen (@ambassador) on CodePen.