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", чтобы посмотреть, как оверлей распространяется на весь контент страницы, перекрывая его.
