Overlay (оверлей), или перекрывающий слой - это слой, который обычно накладывают поверх фонового изображения для того, чтобы затемнить или осветлить его. Дизайнеры в макетах обычно создают его в виде векторного слоя с полупрозрачной заливкой. Цвет заливки зависит от цветов, использованных в макете.
Еще один вариант оверлея используют для создания модальных окон. В этом случае он перекрывает весь контент сайта, а выше него размещается только модальное, или pop-up окно.
В этой статье мы рассмотрим несколько способов создания оверлеев, т.е. перекрывающих слоев, которые закрывают только фоновое изображение. Контент же блока находится поверх оверлея и доступен для чтения, выделения и копирования информации.
Способ 1. Использование отдельного слоя с отрицательными margin
1 2 3 4 5 6 7 8 9 10 11 | <section class="grey-bg"> <div class="overlay"> <div class="container"> <h1>We design <span class="orange">Things</span></h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> <button type="button" class="btn btn-orange">More Info</button> <button class="btn btn-default" type="button">Watch Video</button> </div><!-- /.container --> </div> </section> |
CSS-свойства для этого блока таковы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .white-bg { color: #fff; background: url(../images/white-bg.jpg) center/cover fixed no-repeat #3b434c; height: 500px; padding: 50px 0; } .overlay { box-sizing: content-box; background-color: rgba(59, 67, 76, 0.9); width: 100%; height: 100%; margin: -50px 0; padding: inherit; } |
В данном примере для основного блока с классом white-bg задана высота в 500px и padding в 50px сверху и снизу. Вложенный в него элемент с классом overlay имеет ширину и высоту в 100%, а для того, чтобы компенсировать внутренние отступы в 50px используются отрицательные внешние отступы сверху и снизу в свойстве margin: -50px 0.
Как выглядит код, можно посмотреть ниже и открыть в новой вкладке.
Способ 2. Использование отдельного слоя с position: absolute
В этом случае разметка будет подобной:
1 2 3 4 5 6 7 8 9 10 | <section class="comp-bg"> <div class="overlay"> <div class="container"> <h1>We make <span class="magenta">dreams</span> come true</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> <button type="button" class="btn btn-magenta">More Info</button> </div><!-- /.container --> </div> </section> |
CSS-код в этом случае похож только для section:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .comp-bg { color: #fff; background: url(../images/computer.jpg) center/cover no-repeat #3b434c; height: 500px; position: relative; } .overlay { position: absolute; background-color: rgba(51, 29, 40, 0.9); width: 100%; height: 100%; top: 0; left: 0; padding: 30px 0; } |
Обратите внимание на свойство 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">, который будет содержать весь текст:
1 2 3 4 5 6 7 8 9 10 11 | <section class="music-bg"> <div class="content"> <div class="container"> <h1>Got No Strings</h1> <p>Get the most out of your music with an award-winning, emotionally charged Beats listening experience.</p> <button type="button" class="btn btn-orange" id="removeRelative">Remove position: relative for .content</button> <button type="button" class="btn btn-red hide" id="addRelative">Add position: relative for .content</button> </div> <!-- /.container --> </div> </section> |
В CSS-правилах записываем свойства, подобные предыдущим примерам, но обязательно добавляем для .music-bg свойство position: relative, т.к. для псевдоэлемента ::before необходимо будет задать свойство position: absolute. В данном примере мы используем псевдоэлемент ::before, т.к. здесь достаточно одного слоя, хотя аналогичные правила можно было бы записать и для псевдоэлемента ::after.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .music-bg { color: #fff; background: url(../images/music.jpg) center/cover no-repeat #a267b3; height: 600px; padding: 50px 0; position: relative; } .music-bg:before{ content:''; display: block; position: absolute; width: 100%; height: 100%; top: 0; background-image: linear-gradient(rgba(162, 103, 179, 0.75) 50%, rgba(180, 16, 98, 0.75), rgba(248, 135, 93, 0.75) 90%); } .content {position: relative;} |
Важно также задать для .content свойство position: relative, т.к. иначе абсолютно позиционированный псевдоэлемент ::before перекроет весь текст. Вы можете сами это посмотреть на примере ниже, нажав на кнопку с текстом "Remove position: relative for .content".
Пример (открыть в новой вкладке):
Способ 4: Использование множественного фона
В CSS3 появилась возможность добавлять сразу несколько изображений для одного элемента, перечисляя все свойства группы background через запятую. Например, так:
1 2 3 4 5 | .bg { background-image: url(images/pic1.png),url(images/pic2.png),url(images/pic3.png); background-repeat: no-repeat, no-repeat, repeat-x; background-position: left bottom, right-bottom, left top; } |
Поскольку однотонный фон можно заменить градиентом с полупрозрачностью, то вместо одного из url() можно использовать linear-gradient(), причем сначала нужно указать параметры линейного (или радиального, если он вам больше подходит) градиента, а затем путь к изображению.
Этот способ особенно актуален тогда, когда нужно скрыть часть картинки, т.к. сверху должен быть текст, а другую оставить, как есть. Именно такой пример можно увидеть ниже или открыть в новой вкладке.
Код примера:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <style> * { box-sizing: border-box; } body { margin: 0; font-family: 'Comfortaa', sans-serif; } .top-bg { background: linear-gradient(to right, #45b3e3, rgba( 255, 255, 255, 0.8) 40%, #fff0), url(images/beach.jpg) no-repeat center #fff; background-size: cover; height: 500px; border-bottom: 2px solid #45b3e3; } </style> <section class="top-bg d-flex"> <div class="col-6"> <h2>Море...</h2> <p>Неужели вы никогда не ездили на море???</p> <p>А, вы все-таки были там. </p> <p>Давайте повторим?</p> </div> </section> |
Попробуйте этот вариант и в том случае, если вам нужно использовать одноцветный оверлей. В этом случае вы указываете в свойстве linear-gradient() 2 одинаковых цвета с полупрозрачностью. Учтите, что если вам нужен в одной из областей прозрачный градиент, то вы можете получить неприятную серо-черную полосу в браузере Safari. О том, как этого не допустить, читайте здесь.
Способ 5: Использование position: fixed для overlay на всю высоту экрана
Особенностью свойства position со значением fixed является то, что элемент с таким свойством при указании координат размещается относительно окна просмотра вне зависимости от того, каково значение свойство position у его родительского элемента и фиксируется в этом месте. Указывать свойства position: fixed для элемента с классом overlay очень удобно в том случае, когда прокрутка вам совсем не нужна, т.е. мы говорим о странице с небольшим количеством текста, которая занимает один экран. Разметка ее будет такой:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <section class="food-bg"> <div class="overlay"> <div class="container"> <h1>We cook <span class="red">the most delicious</span> kebab</h1> <p>Natus odit pariatur autem facilis eaque consequuntur explicabo similique aliquid sit magni omnis culpa nostrum, voluptatum suscipit, voluptas minima fugiat laudantium necessitatibus nihil, tempore? Blanditiis in perferendis amet reprehenderit minus.</p> <button type="button" class="btn btn-red hide" id="sectRemove">Remove Section</button> <button type="button" class="btn btn-green" id="sectAdd">Add Section</button> </div> <!-- /.container --> </div> </section> |
CSS-правила запишем так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .food-bg { color: #fff; background: url(../images/shish-kebab.jpg) center/cover no-repeat #3b434c; height: 100vh; } .overlay { position: fixed; background-color: rgba(0, 0, 0, 0.7); top: 0; bottom: 0; left: 0; right: 0; padding: 10% 0; } |
Вместо использования свойств 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.18892
