Как наложить картинку на картинку в css

Фон или картинку на картинку CSS

Подскажите самый простой и кроссбраузерный вариант наложения фона или картинки на картинку. Нужно тупо затемнить. Гуглил — но там черт ногу сломит. Нужно что-то простое, а предлагают и текст засунуть, и иконки, и кучу всего. В идеале я бы сделал свой фон для наложения, но не знаю как впихнуть.

Отслеживать
задан 28 июл 2017 в 0:11
1,581 2 2 золотых знака 22 22 серебряных знака 44 44 бронзовых знака

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Для наложения картинок друг на друга нужно взять элементы и наложить их друг на друга (к примеру с помощью абсолютного позиционирования). Верхние элементы должны быть полупрозрачными.

Допустим есть 2 картинки:

body < /* необязательные стили для демонстрации */ margin: 0; >.image-overlapping < /* устанавливаем размеры контейнера */ width: 100vw; height: 100vh; background-image: url("https://i.stack.imgur.com/DqIv7.jpg"); /* делаем чтобы картинка полностью растягивалась, необязательный стиль */ background-size: 100% 100%; /* позиционирование относительно контейнера */ position: relative; >.image-overlapping:after < content: ""; /* абсолютное позиционирование */ position: absolute; /* растягиваем на всю ширину и высоту */ left: 0; right: 0; top: 0; bottom: 0; /* добавляем полупрозрачность */ opacity: 0.7; /* делаем чтобы полупрозрачный элемент располагался поверх основного блока */ z-index: 1; background-image: url("https://i.stack.imgur.com/bleHC.jpg"); /* делаем чтобы картинка полностью растягивалась, необязательный стиль */ background-size: 100% 100%; >

Как наложить одну картинку на другую?

У меня есть две картинки, круг и квадрат, мне нужно сделать вот так

но получается вот так

Как правильно будет это сделать? Я сделал этот блок в html (это правая часть страницы)

и в css задал этому блоку бекграунд имейдж — этот круг

& .packing_right< background-image: url(../images/Background_elipse.png); background-repeat: no-repeat; >

• Вопрос задан более двух лет назад
• 1120 просмотров

Наложение и порядок слоёв

На веб-странице расположены три изображения игральных карт (рис. 3.51). Пока они лежат рядом, их порядок значения не имеет, но если применить к ним позиционирование и сместить изображения так, чтобы они накладывались друг на друга, одна карта будет находиться выше другой (рис. 3.52).

Рис. 3.51. Карты рядом друг с другом

Рис. 3.52. Карты одна на другой

Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.

Рис. 3.53. Воображаемые координаты веб-страницы

Пример 3.38. Обычный порядок карт

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

     .card IMG < position: relative; >.seven < left: -120px; top: 25px; >.ace  
  
  

В CSS за положением по Z-оси отвечает свойство z-index , которое определяет, «ближе» к нам элемент находится или «дальше». В качестве значений принимается целое число, чем оно больше, тем выше располагается элемент по отношению к другим. Элементам автоматически присваивается значение 0, так что даже z-index : 1 заставит элемент перекрывать все нижележащие. Доработаем пример 3.38 так, чтобы порядок карт поменялся на противоположный, причём только редактируя стиль, оставляя HTML-код прежним.

.card IMG < position: relative; >.three < top: 50px; left: 55px; z-index: 5; >.seven < left: -120px; top: 25px; z-index: 2; >.ace

Свойство z-index для класса three специально установлено как 5 для демонстрации, что последовательность значений z-index роли не играет. Главное, чтобы одно число было больше другого.

Свойство z-index работает только для элементов, у которых значение position задано как absolute , fixed или relative .

Когда требуется расположить элемент поверх всех остальных на странице, ему ставят очень большое значение z-index , например 9999. Это гарантирует, что даже если в стилях и применяется z-index , он будет меньше указанного. В примере 3.39 у карт при наведении на них курсора меняется z-index на 10. Никаких скриптов здесь не понадобится, всё делается через псевдокласс :hover .

Пример 3.39. Изменение z-index при наведении на карту

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

     .card IMG < position: relative; >.three < top: 50px; left: 55px; z-index: 5; >.seven < left: -120px; top: 25px; z-index: 2;>.ace < left: -295px; z-index: 1; >.card IMG:hover  
  
  

Как адаптивно наложить картинку на картинку средствами CSS?

Подскажите пожалуйста как решить следующую проблему:
Есть основное фото 1.jpg мне нужно сверху этого изображения наложить другую картинку 2.png.
Вторая картинка, которая сверху должна позиционироваться не по центру а в определенном месте. Самая сложная для меня задача это совмещение должно быть адаптивным и при изменении размера экрана все должно сжиматься корректно не меняя своего позиционирования.

• Вопрос задан более трёх лет назад
• 13287 просмотров

Комментировать
Решения вопроса 1
Денис Букреев @denisbookreev
Попробуй картинке с футболкой это дать:

display: block; position: relative; width: 90%; /* это не важно */

А поверх дай картинке вот такую бороду:

display: block; width: 30%; /* это наверное уже у тебя в js будет вычисляться */ position: absolute; top: 22%; left: 40%; /* тоже через js будешь вычислять */

Ответ написан более трёх лет назад
Нравится 3 1 комментарий
Распишите пожалуйста подробнее(
Ответы на вопрос 1
Павел Радьков @paulradzkov
Дизайнер, верстальщик, начальник отдела UI

Внутрь контейнера svg подгружайте две картинки, спрайт позиционируете относительно майки. Сам svg ведет себя как цельная картинка. Можете еще с эффектами наложения поэкспериментировать.

Ответ написан более трёх лет назад
Нравится 2 5 комментариев

Андрей Кривенко @ak-biznes Автор вопроса

Павел спасибо Вы предложили отличное решение моей проблемы — супер. Попробовал все отлично работает на любых разрешениях, ничего не плывет и не сьежает.

Андрей Кривенко @ak-biznes Автор вопроса

Павел подскажите пожалуйста из-за чего у меня изображения теряют в качестве? Мелкая елочка появляется. Я так подозреваю что нужно правильно выставить следующие значения?
viewBox=»0 0 1000 1000″
Не могли бы Вы подсказать за что отвечают эти значения? Это пиксели, проценты или какой то масштаб? Что это?
Заранее большое спасибо!

Павел Радьков @paulradzkov

Андрей Кривенко: Картинка майки в моем примере размером 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.

Для наклейки на майку аналогично. Масштаб картинки с наклейкой должен быть не меньше, чем у майки. Т.е. не стоит наклейку растягивать больше, чем ее исходные пиксели.

Андрей Кривенко @ak-biznes Автор вопроса

Павел Радьков: Спасибо большое за такой развернутый ответ. Видимо svg не очень подходит для растровых картинок, все таки это под векторный формат изображений. При сжимании (а в адаптивной верстке без этого никуда) изображение из-за высокого количества точек на пиксель по краям становится елочкой(теряется качество отображения). Жаль наверное мне этот метод не подойдет, хотя все выравнивает и центрирует очень класно(((