От автора: очень популярная в веб-дизайне в настоящее время вещь — это перекрывающиеся изображения. Когда вам, как разработчику, передается проект, есть несколько способов реализовать это — как и почти всегда в CSS.
Один из способов, который вы могли бы использовать — это абсолютно позиционировать один элемент с более низким z-индексом, чтобы другое изображение располагалось сверху, настроить ширину каждого изображения, чтобы мы могли видеть их оба, и это будет работать, верно?
Нуууу, когда вам понадобится текст или любой другой контент после изображений, вы столкнетесь с проблемой. Если элемент с абсолютным позиционированием выше статического (верхнего) изображения, следующий контент будет перекрывать изображения. Это связано с высотой изображения с абсолютным позиционированием, оно не распознается, поскольку находится вне потока документов (нормальное поведение для элемента с абсолютным позиционированием). Чтобы обойти это, вы можете начать экспериментировать с произвольной высотой изображений, и тогда компонент станет очень хрупким, ограниченным и не стабильным.
Я не рекомендую это. Пример того, о чем я говорю, здесь:
Курс «Frontend-разработчик»
— Научитесь верстать сайты для всех типов устройств.
— Сможете использовать JavaScript для работы в браузере.
— 77 часов теории, 346 часов практики.
— Выполните 5 масштабных проектов для портфолио.
— Помощь с поиском работы или стажировки.
Курс «веб-разработчик с нуля»
— Научитесь программировать на JavaScript и PHP.
— Сможете создавать сайты и веб-приложения.
— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.
— Выполните 9 масштабных проектов для портфолио
— Помощь с поиском работы или стажировки.
Курс «PHP-разработчик с нуля»
— Научитесь создавать сайты и веб-приложения на языке PHP.
— Изучите актуальные фреймворки Laravel, Simfony и Yii2.
— 78 часов теории и 361 час практики.
— Вы создадите 5 масштабных проектов для портфолио.
— Помощь с поиском работы или стажировки.
Хорошая новость: есть гораздо лучший способ, и не пытайтесь сделать это первым способом, если только вам не нравится головная боль.
Я опишу два надежных подхода к перекрывающимся изображениям.
Метод 1: CSS Grid
Прежде чем я услышу ворчание о необходимости поддержки IE и поэтому вы не можете использовать CSS Grid, я говорю, что вы легко можете использовать CSS Grid и запасной вариант для IE. Я покажу вам, как его создать в последнем разделе.
Одна из моих любимых вещей в CSS Grid (помимо единиц fr или свойства min-max) — это возможность перекрывать изображения, изменяя z-индексы, не извлекая ничего из обычного потока документов!
Сначала мы проанализируем этот компонент. Несколько вещей, на которые стоит обратить внимание:
Компонент будет работать независимо от высоты верхнего или нижнего изображения. (Это следует учитывать, когда у клиентов есть возможность загрузить любое изображение через CMS)
Верхнее изображение всегда будет слегка смещено вниз и будет выровнено по левому краю контейнера.
Often, we have background images that we put text on top of. An example could be a hero section, or the above-the-fold content on basically any marketing site these days. Some times, we need to improve the contrast between the text and the background image. Sure, we could just change the image itself — but some times that’s not an option.
The old and clunky way 👴
There are several ways to solve this, but this is how I learned to do it back in the days. I typically create the following HTML structure:
I would then make the image-box relatively positioned, all children absolutely positioned inside, and stack them in the order I would like.
What is this —syntax?
Note that we’re passing in the image url via something called CSS Custom properties. You might also know them as CSS variables. It’s a way to pass values between our HTML and CSS. You can read more about CSS Custom properties on MDN.
/* The container box is relative so we can position stuff inside of it */.image-boxposition:relative;>/* The background and overlay need to be absolutely positioned */.image-box__background,.image-box__overlayposition:absolute;left:0;top:0;right:0;bottom:0;>/* The background image div sizes and positions the background itself. It's also at the bottom-most position in our "div stack" (z-index 1) We set the image url via a CSS custom property, that's set via the style attribute in our HTML */.image-box__backgroundbackground:var(--image-url)centercenterno-repeat;background-size:cover;z-index:1>/* The overlay div is just a colored element with some opacity. It's above the background image in our stack, so it appears to darken the image */.image-box__overlaybackground:rgba(0,0,0,0.5);z-index:2;>/* The content div is at the top of our stack. We'd probably add some padding or flexbox properties here as well, to place the content appropriately */.image-box__contentposition:relative;z-index:3;/* Finally, style and place the content */color:white;min-height:100vh;display:flex;align-items:center;justify-content:center;>
The new cool way! 😎
That was a lot code. Turns out, it doesn’t have to be that way. Let’s change our HTML to look like this:
.image-box/* Here's the trick */background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),var(--image-url)centercenter;background-size:cover;/* Here's the same styles we applied to our content-div earlier */color:white;min-height:50vh;display:flex;align-items:center;justify-content:center;>
The first background image is a linear gradient that goes from and to the same color. That color is a semi-transparent black, which works as an overlay for your second background. And that’s it really. If you’re feeling clever, you could also pass in the amount of darkening you’d want as a second css variable, for further customization. Or use an actual gradient to make your images pop a bit more.
Using box shadow to achieve the same
Turns out, CSS has several ways of layering «meta-content» on top of a background image. Another way to achieve the same is by using the box-shadow property with a huge spread value and the inset setting.
.image-box/* Here's the trick */box-shadow:inset000100vwrgba(0,0,0,0.5);/* Basic background styles */background:var(--image-url)centercenterno-repeat;background-size:cover;/* Here's the same styles we applied to our content-div earlier */color:white;min-height:50vh;display:flex;align-items:center;justify-content:center;>
Here’s a CodePen with this implementation as well: This gives you something we can animate as well (notice what happens when you hover the image), which can be a nice UX delight. You don’t have the same control over the gradient, however, so which technique you should choose is depending on the context of your design. It’s also been noted that this technique might not be as good for performance, especially on lower end devices. Remember to consider this as well when deciding on your technique. Thanks for coming to my DEV talk.
Overlay (оверлей), или перекрывающий слой — это слой, который обычно накладывают поверх фонового изображения для того, чтобы затемнить или осветлить его. Дизайнеры в макетах обычно создают его в виде векторного слоя с полупрозрачной заливкой. Цвет заливки зависит от цветов, использованных в макете.
Еще один вариант оверлея используют для создания модальных окон. В этом случае он перекрывает весь контент сайта, а выше него размещается только модальное, или pop-up окно.
В этой статье мы рассмотрим несколько способов создания оверлеев, т.е. перекрывающих слоев, которые закрывают только фоновое изображение. Контент же блока находится поверх оверлея и доступен для чтения, выделения и копирования информации.
Способ 1. Вкладываем перекрывающий слой overlay внутрь контейнера с заданной высотой
Очень часто необходимо добавить перекрывающий слой в такой блок, как header . За счет того, что в этот html-элемент, как правило добавляют большое фоновое изображение, которое собственно и нужно перекрыть слоем overlay, и совсем немного текста, для header обычно явно задают такое свойство, как height . Внутри header в разметке размещают , а уже внутри него — всю остальную разметку.
В 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, то имеет смысл сразу же написать это свойство и для них в таком виде:
Полупрозрачный градиент над картинкой на чистом CSS
Я переделывал страницу мастер-класса AppSync и захотел немного улучшить скучную секцию «Обо мне».
Я насмотрелся на разные сайты и решил сделать что-то такое:
Видите градиент внизу каждой картинки? Из него получается неплохой контрастный фон для подписей, а ещё он хорошо выглядит с любыми фоновыми картинками (как видите, некоторые из них тёмные, а другие очень светлые). Я использовал синтаксис ::before из CSS, чтобы создать пустой псевдоэлемент ::before с фоновым градиентом.
Вот базовый HTML-код для каждой картинки
Для начала обратите внимание на z-index у тегов и . Значения выбраны так, чтобы появился перед градиентом, а не за ним.
У тега z-index равен 50 — он на переднем плане.
У псевдоэлемента ::before z-index принимает любое значение от 1 до 49 и остаётся в середине.
У тега z-index равен 0 — он позади всех.
А вот так выглядит CSS-атрибуты для псевдоэлемента ::before .
Вы могли заметить пустое значение » атрибута content . К сожалению, если его не указать, то псевдоэлемент ::before вообще не создаётся. Ширину, высоту и позицию мы задаем, чтобы убедиться, что ::before полностью перекрывает тег .
Тот же результат получается и с помощью дополнительных тегов , но этот способ показался мне очень хорошим, да ещё и на чистом CSS.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
