Как реализовать перекрытие изображений в CSS
От автора: очень популярная в веб-дизайне в настоящее время вещь — это перекрывающиеся изображения. Когда вам, как разработчику, передается проект, есть несколько способов реализовать это — как и почти всегда в CSS.
Один из способов, который вы могли бы использовать — это абсолютно позиционировать один элемент с более низким z-индексом, чтобы другое изображение располагалось сверху, настроить ширину каждого изображения, чтобы мы могли видеть их оба, и это будет работать, верно?
Нуууу, когда вам понадобится текст или любой другой контент после изображений, вы столкнетесь с проблемой. Если элемент с абсолютным позиционированием выше статического (верхнего) изображения, следующий контент будет перекрывать изображения. Это связано с высотой изображения с абсолютным позиционированием, оно не распознается, поскольку находится вне потока документов (нормальное поведение для элемента с абсолютным позиционированием). Чтобы обойти это, вы можете начать экспериментировать с произвольной высотой изображений, и тогда компонент станет очень хрупким, ограниченным и не стабильным.
Я не рекомендую это. Пример того, о чем я говорю, здесь:
Онлайн курс по JavaScript
Научитесь создавать приложения со сложными интерфейсами
Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.
Хорошая новость: есть гораздо лучший способ, и не пытайтесь сделать это первым способом, если только вам не нравится головная боль.
Я опишу два надежных подхода к перекрывающимся изображениям.
Метод 1: CSS Grid
Прежде чем я услышу ворчание о необходимости поддержки IE и поэтому вы не можете использовать CSS Grid, я говорю, что вы легко можете использовать CSS Grid и запасной вариант для IE. Я покажу вам, как его создать в последнем разделе.
Одна из моих любимых вещей в CSS Grid (помимо единиц fr или свойства min-max) — это возможность перекрывать изображения, изменяя z-индексы, не извлекая ничего из обычного потока документов!
Сначала мы проанализируем этот компонент. Несколько вещей, на которые стоит обратить внимание:
Компонент будет работать независимо от высоты верхнего или нижнего изображения. (Это следует учитывать, когда у клиентов есть возможность загрузить любое изображение через CMS)
Верхнее изображение всегда будет слегка смещено вниз и будет выровнено по левому краю контейнера.
Как наложить картинку на картинку в html
Для наложения картинки на картинку в HTML можно использовать абсолютное позиционирование. Для этого необходимо создать контейнер, который будет содержать обе картинки, и применить к этому контейнеру относительное позиционирование. Затем, для каждой картинки нужно задать абсолютное позиционирование и указать координаты ее расположения относительно родительского контейнера. Например:
class="container"> src="image1.jpg" class="image image1" /> src="image2.jpg" class="image image2" /> .container position: relative; > .image width: 300px; height: 200px; > .image1 position: absolute; top: 0; left: 0; > .image2 position: absolute; top: 0; left: 0; > В данном примере изображения с размерами 300×200 будут распологаться одна над другой.
Как сделать — Наложение на изображение
Узнать, как создать эффект масштабирования наложения изображения при наведении.
Наложение на изображение
Наведите указатель мыши на изображение, чтобы увидеть эффект масштабирования.
Создать наложение на изображение
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
/* Контейнер, необходимый для размещения наложения. Отрегулируйте ширину по мере необходимости */
.container position: relative;
width: 50%;
>
/* Сделайте изображение отзывчивым */
.image width: 100%;
height: auto;
>
/* Эффект наложения (полная высота и ширина) — накладывается поверх контейнера и поверх изображения */
.overlay position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
>
/* Когда вы наведете курсор мыши на контейнер, текст наложения будет «масштабироваться» на дисплее */
.container:hover .overlay transform: scale(1);
>
/* Некоторый текст внутри накладка, которая расположена посередине вертикально и горизонтально */
.text color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
>
Совет: Также смотреть другие эффекты наложения изображений (затухание, слайд и т.д.) в нашем учебнике Как сделать — Эффект наведения на изображение.
Зайдите на наш учебник CSS Изображения, чтобы узнать больше о том, как стилизовать изображения.
Как адаптивно наложить картинку на картинку средствами CSS?
Подскажите пожалуйста как решить следующую проблему:
Есть основное фото 1.jpg мне нужно сверху этого изображения наложить другую картинку 2.png.
Вторая картинка, которая сверху должна позиционироваться не по центру а в определенном месте. Самая сложная для меня задача это совмещение должно быть адаптивным и при изменении размера экрана все должно сжиматься корректно не меняя своего позиционирования.
display: block; position: relative; width: 90%; /* это не важно */display: block; width: 30%; /* это наверное уже у тебя в js будет вычисляться */ position: absolute; top: 22%; left: 40%; /* тоже через js будешь вычислять */Внутрь контейнера svg подгружайте две картинки, спрайт позиционируете относительно майки. Сам svg ведет себя как цельная картинка. Можете еще с эффектами наложения поэкспериментировать.
Павел спасибо Вы предложили отличное решение моей проблемы — супер. Попробовал все отлично работает на любых разрешениях, ничего не плывет и не сьежает.
Павел подскажите пожалуйста из-за чего у меня изображения теряют в качестве? Мелкая елочка появляется. Я так подозреваю что нужно правильно выставить следующие значения?
viewBox=»0 0 1000 1000″
Не могли бы Вы подсказать за что отвечают эти значения? Это пиксели, проценты или какой то масштаб? Что это?
Заранее большое спасибо!
Андрей Кривенко: Картинка майки в моем примере размером 1000×1000px, поэтому и viewBox=»0 0 1000 1000″ — размер полотна, в котором единицы измерения совпадают с пикселями. (x y width height)
А width=»100%» height=»100%» на элементе svg — это html-аттрибуты, такие же, как для img. Вы их можете убрать, переопределить через css и т.д.
Вам нужно во viewBox вписать размеры вашей картинки с майкой. Координаты x=»0″ y=»0″ — это точка монтирования — левый верхний угол картинки. Он совпадает с началом координат. height=»1000″ width=»1000″ — размеры картинки (в пикселях, но без указания единиц измерения). Для майки должны совпадать с viewBox.
Для наклейки на майку аналогично. Масштаб картинки с наклейкой должен быть не меньше, чем у майки. Т.е. не стоит наклейку растягивать больше, чем ее исходные пиксели.
Павел Радьков: Спасибо большое за такой развернутый ответ. Видимо svg не очень подходит для растровых картинок, все таки это под векторный формат изображений. При сжимании (а в адаптивной верстке без этого никуда) изображение из-за высокого количества точек на пиксель по краям становится елочкой(теряется качество отображения). Жаль наверное мне этот метод не подойдет, хотя все выравнивает и центрирует очень класно(((