Как реализовать перекрытие изображений в CSS

Как реализовать перекрытие изображений в CSS

От автора: очень популярная в веб-дизайне в настоящее время вещь — это перекрывающиеся изображения. Когда вам, как разработчику, передается проект, есть несколько способов реализовать это — как и почти всегда в CSS.

Один из способов, который вы могли бы использовать — это абсолютно позиционировать один элемент с более низким z-индексом, чтобы другое изображение располагалось сверху, настроить ширину каждого изображения, чтобы мы могли видеть их оба, и это будет работать, верно?

Нуууу, когда вам понадобится текст или любой другой контент после изображений, вы столкнетесь с проблемой. Если элемент с абсолютным позиционированием выше статического (верхнего) изображения, следующий контент будет перекрывать изображения. Это связано с высотой изображения с абсолютным позиционированием, оно не распознается, поскольку находится вне потока документов (нормальное поведение для элемента с абсолютным позиционированием). Чтобы обойти это, вы можете начать экспериментировать с произвольной высотой изображений, и тогда компонент станет очень хрупким, ограниченным и не стабильным.

Я не рекомендую это. Пример того, о чем я говорю, здесь:

Хорошая новость: есть гораздо лучший способ, и не пытайтесь сделать это первым способом, если только вам не нравится головная боль.

Я опишу два надежных подхода к перекрывающимся изображениям.

Метод 1: CSS Grid

Прежде чем я услышу ворчание о необходимости поддержки IE и поэтому вы не можете использовать CSS Grid, я говорю, что вы легко можете использовать CSS Grid и запасной вариант для IE. Я покажу вам, как его создать в последнем разделе.

Одна из моих любимых вещей в CSS Grid (помимо единиц fr или свойства min-max) — это возможность перекрывать изображения, изменяя z-индексы, не извлекая ничего из обычного потока документов!

Сначала мы проанализируем этот компонент. Несколько вещей, на которые стоит обратить внимание:

Компонент будет работать независимо от высоты верхнего или нижнего изображения. (Это следует учитывать, когда у клиентов есть возможность загрузить любое изображение через CMS)

Верхнее изображение всегда будет слегка смещено вниз и будет выровнено по левому краю контейнера.

Как реализовать перекрытие изображений в CSS

Структура HTML

Совет по специальным возможностям: Если вы знаете, что изображение является декоративным изображением (например, изображением волн), и это не изменится, вы можете добавить ему role=»presentation», и оно не будет отображаться для программ чтения с экрана.

Одна вещь, которую мы должны принять во внимание — это ширина колонок сетки. Как упоминалось ранее, вы можете подойти к этому несколькими способами, но я собираюсь придерживаться использования 12 колонок, поскольку 12-столбцовые сетки используются довольно часто.

Чтобы сделать это, для родительского элемента, который содержит элементы, в CSS мы задаем:

grid-template-columns — это свойство, которое определяет, сколько столбцов будет иметь сетка, а значение1fr задает, чтобы браузер вычислял доступное пространство. Это удобно, когда у вас есть пробелы в столбцах и строках.

position: relative здесь обязательно: это то, что позволяет z-index изображений работать как положено. Итак, теперь, когда у нас есть сетка, следующий шаг — просмотр ширины изображений:

Как реализовать перекрытие изображений в CSS

Чтобы добавить ширину к каждому изображению на основе дизайна, я использую проценты. Поэтому давайте начнем с общей ширины компонента изображения 844px, которая равна 100%. Ширина верхнего изображения равна 521px. Я делю, 521px / 844px * 100, что составляет 61,7%, округляем до 62%, и вы получите число, которое находится точно в середине между 7/12 (58%) и 8/12 (66%)! Возьмем 66%.

Для верхнего изображения мы напишем в CSS следующее:

Для второго изображения мы рассчитаем (645px / 844) * 100 = 76.4%. Округлим до 75%, что идеально вписывается в нашу сетку из 12 столбцов — 9 / 12. Итак, чтобы сделать это, мы обеспечим, чтобы нижнее изображение охватывало 9 столбцов, начиналось с 4-й линии сетки и охватывало всю оставшуюся часть сетки, что и делает -1. Вы можете представить себе -1, как конец, если это поможет!

Нижнее изображение CSS будет выглядеть так:

И вуаля! С помощью CSS-сетки и очень небольшого количества кода вы можете задать перекрытие всего, включая текст поверх изображений, текст поверх текста (о боже!), изображения поверх холста.

Метод 2: Floa с отрицательными полями

Ну а в случае, если вам нужно поддерживать IE, тогда этот раздел для вас. Этот метод требует тактики ole — «убрать элемент из потока документов», и мы будем делать это с помощью float!

Мой друг и менеджер Джейк Фентресс (Jake Fentress) предложил это решение, которое я применил к недавнему клиентскому проекту, поскольку нам нужно было поддерживать IE11.

Хорошей новостью является то, что структура меняется немного. Для image-stack родительского элемента мы добавим clearfix, так как мы перемещаем его дочерние элементы и нам нужно визуализировать содержимое ниже:

Тогда для верхнего изображения мы добавим:

Отрицательная разница здесь обязательна. Отрицательные поля ДЕЙСТВИТЕЛЬНО странные. В зависимости от того, будет ли это отрицательное поле сверху или снизу, оно будет вести себя по-разному, если вы примените отрицательное поле слева и справа, и они будут работать по-разному для плавающих элементах.

Мы применяем отрицательное правое поле к плавающему левому элементу, что позволяет контенту перекрываться. -100% равно ширине контейнера, поэтому это сдвигает изображение влево и позволяет нижнему изображению отображаться под ним, как будто его нет в DOM.

Резервное решение (метод CSS Grid и Float)

В этом разделе я предоставлю вам лучшее из обоих миров, современный CSS для современных браузеров и запасной вариант для IE11.

Наиболее важной частью здесь является запрос функции @supports. Мы будем использовать его, чтобы проверить, поддерживает ли браузер значение display: grid. Сначала мы добавляем вариант для IE или резервный CSS, прежде чем добавить запрос функции @supports. После того, как мы добавим современный CSS, плавающие элементы больше не будут использоваться, так как в силу вступает сетка. В запросе функции поддержки мы сбросим ширину до 100%, и вы можете либо удалить свойство float, либо оставить его как есть, поскольку оно не влияет на элементы.

Вот последний код и пример, демонстрирующий именно это:

Я надеюсь, что эта статья была полезна для вас и осуществила ваши мечты! Будьте в порядке!

Источник: //bricampgomez.com

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: