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

Элементы в html накладываются друг на друга

Мне нужно чтобы они шли друг под другов, но элементы просто накладываются друг на друга. Можно конечно сделать для каждого элемента top: n% но это плохой вариант. Можно это как то исправить?

body < font-family: Roboto, Arial, serif; >.main < position: absolute; right: 0%; left: 150px; top: 5%; width: 91%; height: 100%; background-color: #ffffff; >#main_pic < background-image: url("../res/st.petersburg-main3.jpg"); background-repeat: no-repeat; background-size: cover; width: 70%; height: 70%; background-position: 50%; left: 10%; top: 5%; position: absolute; >header < font-size: xx-large; z-index: 1000; top: 0%; left: 0%; width: 100%; position: fixed; height: 5%; border: darkblue; align-content: center; background-color: #72afc0; color: white; display: inline-flex; justify-content: center; align-items: center; >aside < font-size: medium; position: fixed; height: 100%; width: 160px; left: 0%; top: 5%; background-color: #add8e6; color: white; >aside a < text-decoration: none; color: white; >aside ul < position: center; margin-left: -9px; >article

• О городе
  • История
  • История
  • История
  • История
  • История
  • История
  • История
  • История
  • История

  Отслеживать

  23 6 6 бронзовых знаков

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

  Есть две фото на одном ноутбук на другом разодранный ноутбук силно сложно соединить две картинки в одну и как бы водишь лупой по целому а там где не большая лупа так показывает нужнюю картинку с разобранным ноутам. Типо ренгин лупа.

  Отслеживать
  5,005 2 2 золотых знака 11 11 серебряных знаков 25 25 бронзовых знаков
  задан 11 окт 2020 в 16:06
  Александр Пушкин Александр Пушкин
  11 2 2 бронзовых знака

  Погугли плагин какой-нибудь, такое «на коленке» за пару минут не сваяешь, да и зачем костыли городить

  11 окт 2020 в 16:12
  11 окт 2020 в 16:15
  11 окт 2020 в 17:15

  0

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

  Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.

  • html
  • css
  Важное на Мете

  Связанные

  Похожие

  Подписаться на ленту

  Лента вопроса

  Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

  Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

  Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

  В современном веб-строительстве одна из основных возникающих проблем между верстальщиком и дизайнером – это слои в Photoshop с разными режимами смешивания. Браузер умеет выводить в стандартном режиме смешивания “Normal” (применяется, по умолчанию, в CSS – blend-mode: normal). И это является основной проблемой, т.к. чтобы вырезать правильно изображение из макета с наложенными на нее слоями в разных режимах смешивания приходится применять невообразимые уловки, а в отдельных случаях это не представляется возможным. И это уже начинает уходить в прошлое! Режимы смешивания, которые встречаются в Photoshop теперь доступны в CSS через свойства blend-mode и background-blend-mode. Значения этих свойств точно такие же, как любимом графическом редакторе: lighten, multiply, hard-light и так далее.

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

  

  Речь пойдёт о реализации спецификации «Compositing and Blending Level 1» в современных браузерах.

  Данный стандарт описывает правила наложения слоёв друг на друга, аналогично тому, как это делается в Photoshop. Например, в режиме multiply итоговый цвет пикселя будет равен произведению цветов двух слоёв. Благодаря этому, можно добиться различных эффектов, таких как:

  1) Фотоэффекты, такие как обесцвечивание картинки, сепия, наложение цвета. Например, достаточно будет использовать только одну цветную картинку, чтобы получить плавную анимацию от обесцвеченной к цветной при наведении:

  Не все фотошопные режимы смешивания доступны нам в CSS, а только multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference и exclusion. Для работы этого вполне должно хватить.

  Живые примеры на fiddle. Кликните по каждой из картинок и понаводите на них мышью. Все это сделано на CSS

  

  

  2) Часто дизайнеры ленятся вырезать фон из картинки и используют наложение картинки без прозрачности на слой так, что фоновый чёрный/белый цвет будет в данном режиме преобразуются в прозрачный (режим screen/multiply):

  (на картинке внизу показал кусочек накладываемого изображения «как есть»)

  

  3) Можно использовать технологию для реализации эффектов с текстом, например, в логотипах:

  Список режимов

  

  Для примера будем накладывать тигра на такую картинку в разных режимах:

  Режим	Пример	Описание режима
  normal		Цвет поверх цвета без всяких эффектов.
  multiply		Игнорирует белый цвет, остальное затемняет. Как будто наложить два слайда друг на друга. Светлые оттенки остаются практически невидимы, а тёмные подчёркиваются.
  screen		Игнорирует чёрный цвет, делает остальные цвета светлее. Представьте два проектора светящие на изображение. Темнее изображению не стать, а наоборот, светлые тона проявляются лучше.
  overlay		Игнорирует обычные тона, делая светлые стороны изображения ярче, тёмные, темнее. Другими словами, усиливает контраст.
  darken		Удаляет светлые части фото
  lighten		Затемняет темные пиксели более светлыми.
  color-dodge		Действие режима похоже на Screen, но заметно сильнее в светлых областях за счет проявления более насыщенных и контрастных цветов нижнего слоя.
  color-burn		Затемняет яркость, значительно повышает контраст изображения и не влияет на белые пикселы в изображении.
  hard-light		Использует тот же метод, что и режим Overlay, но эффект более сильный. Если верхний слой светлее 50% серого, то верхний слой осветяется через Screen, а если темнее – то затемяется через Multiply. Если верхний слой на 50% серый – эффекта не будет.
  soft-light		Если верхний цвет светлее, нижний цвет становиться более светлым; если темнее – нижний цвет становится более темным.
  difference		Представляет идентичные пиксели как черные, похожие – как темно-серые, а противоположные – как инвертированные. Если верхний слой черный – изменений не будет.
  exclusion		Похоже на режим Difference, однако обеспечивает меньшую контрастность. Наложение на черный цвет не приводит к каким-либо изменениям, а наложение на белые пиксели – к инверсии сравниваемых значений, что приводит к их отображении серым цветом.
  hue*		Комбинирует свечение (Luminance) и насыщенность (Saturation) нижнего слоя с цветовым тоном (Hue) верхнего.
  saturation*		Комбинирует свечение (Luminance) и цветовой тон (Hue) нижнего слоя с насыщенностью (Saturation) верхнего слоя.
  color*		Комбинирует тон (Hue) и насыщенность (Saturation) верхнего слоя и свечение (Luminance) нижнего слоя.
  luminosity*		Противоположный режиму Color. Комбинирует Luminance (cвечение) верхнего слоя и Hue (цвета) и Saturation (колебание цвета) нижнего слоя.

  Технологии применения и поддержка браузерами

  По спецификации, применять режимы наложения можно в четырёх случаях:

  1) Для фонового изображения в CSS

  Поддерживают: Chrome 35+, Firefox 30+ beta (войдёт ли в релиз этот функционал, ещё вопрос, т. к. скорее всего уже переносили «приземление» этого функционала).

  Как разместить элементы друг под другом?

  

  Понадобилось в него добавить ещё несколько элементовов, но при добавлении выходит ерунда: Как разместить Restart и ВРЕМЯ друг под другом?

  Отслеживать
  задан 29 сен 2020 в 11:35
  2,795 2 2 золотых знака 15 15 серебряных знаков 57 57 бронзовых знаков

  1 ответ 1

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

  flex-direction: column; 

  Отслеживать
  ответ дан 29 сен 2020 в 11:39
  Nikita Galadiy Nikita Galadiy
  1,460 1 1 золотой знак 8 8 серебряных знаков 24 24 бронзовых знака

  Спасибо большое! А что можно сделать с большим расстоянием между ними? Просто, оно великовато получается��

  29 сен 2020 в 11:43

  @DGDays при стилях, указанных в вопросе, расстояний быть не должно. Если есть еще стили, то нужно смотреть уже их

  29 сен 2020 в 11:45

  • html
  • css
  Важное на Мете

  Похожие

  Подписаться на ленту

  Лента вопроса

  Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

  Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

  Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

  Читать:

  Сколько ячеек содержит диапазон d2 g8