Вы здесь: Главная » CSS » Способы создания перекрывающего слоя overlay

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

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

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

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

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

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

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

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

Способ 2. Использование отдельного слоя с 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).

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

Способ 3. Использование псевдоэлементов ::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".

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

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

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

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

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

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

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

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