Как сделать одну картинку поверх другой css

как поверх одного изображения закрепить другое

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

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

Как разместить одно изображение поверх другого в HTML?

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

Я просто хочу, чтобы положение снимков относительно друг друга.

в качестве более сложного примера, представьте себе одометр, помещенный внутри большего изображения. Для шести цифр мне нужно будет составить миллион разных изображений или сделать все это на лету, где все, что нужно, — это поместить шесть изображений поверх другого.

9 ответов

хорошо, через некоторое время, вот на что я приземлился:

Как самое простое решение. То есть:

создайте относительный div, который помещается в поток страницы; поместите базовое изображение сначала как относительное, чтобы div знал, насколько оно должно быть большим; поместите наложения как абсолютные относительно верхнего левого края первого изображения. Хитрость в том, чтобы получить родственников и абсолюты правильно.

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

вот код, который может дать вам идеи:

Я подозреваю, что решение ВСТО может быть неудобно, потому что это требует от вас позиционировать оба изображения абсолютно. Вы можете захотеть, чтобы первый из них занял позицию в потоке.

обычно есть естественный способ сделать это-CSS. Вы ставите position: relative на элемент контейнера, а затем абсолютно позиционируете детей внутри него. К сожалению, вы не можете поместить одно изображение в другое. Вот почему мне нужен контейнер div. Обратите внимание, что я сделал его поплавком, чтобы сделать его autofit к его содержимому. Отображение: встроенный блок должен теоретически работать, но поддержка браузера там плохая.

EDIT: я удалил атрибуты размера из изображений, чтобы лучше проиллюстрировать свою точку зрения. Если вы хотите, чтобы изображение контейнера имело размеры по умолчанию, и вы не знаете размер заранее, вы не можете использовать фон трюк. Если вы это сделаете, это лучший способ уйти.

одна проблема, которую я заметил, может вызвать ошибки, заключается в том, что в ответе rrichter код ниже:

должен включать единицы px в стиле, например.

кроме этого, ответ работал нормально. Спасибо.

вы можете абсолютно позиция pseudo elements относительно их родительского элемента.

Это дает вам два дополнительных слоя для игры с каждым элементом — поэтому позиционирование одного изображения поверх другого становится легким — с минимальной и семантической разметкой (без пустых divs и т. д.).

встроенный стиль только для ясности здесь. Используйте настоящую таблицу стилей CSS.

простой способ сделать это-использовать фоновое изображение, а затем просто поместить в этот элемент.

другой способ сделать-использовать слои css. Существует тонна ресурсов, доступных, чтобы помочь вам в этом, просто найдите слои css.

@buti-oxa: не быть педантичным, но ваш код недействителен. HTML width и height атрибуты не допускают единиц измерения; вы, вероятно, думаете о CSS width: и height: свойства. Вы также должны предоставить тип контента ( text/css ; см. код ВСТО) с <style> тег.

оставив px; на width и height атрибуты могут вызвать отказ механизма рендеринга.

Как сделать одну картинку поверх другой

Please complete the security check to access www.canva.com

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Cloudflare Ray ID: 571b963e88339cd6 • Your IP : 5.45.65.94 • Performance & security by Cloudflare

На веб-странице расположены три изображения игральных карт (рис. 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

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

Свойство 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 при наведении на карту

Главное нужно указать две картинки на вашем компьютере или телефоне, нажать кнопку OK внизу страницы, подождать пару секунд и скачать готовый результат. Остальные настройки уже выставлены по умолчанию.
На этом сайте ещё есть: наложение текста, клипартов (множества картинок), календаря, замена однотонного фона на прозрачный, соединение двух картинок в одну, а также создание коллажа, поворот и зеркальное отражение.

Пример наложения обычной jpg картинки на другую jpg картинку со всеми настройками по умолчанию:
+ =

Пример наложения обычной jpg картинки на другую jpg картинку с изменённым размером и без прозрачности:
+ =
Чтобы так получилось, нужно выставить такие настройки:
1) Прозрачность второй картинки — «0%»;
2) Автоматическая подгонка размера 2-й картинки — «использовать ручное изменение размера в %»;
3) Размер 2-й картинки относительно «ширины и высоты» 1-й картинки — «45%».
И остальное без изменений, как было выставлено по умолчанию.

Пример наложения PNG картинки с прозрачным фоном на JPG картинку:
+ =
Для этого в настройках нужно указать:
1) Тип наложения второй картинки — «Наложить PNG, GIF, TIFF картинку с прозрачным фоном».
А остальные настройки оставить такими, как они были выставлены по умолчанию.

Пример наложения PNG картинки с ручным изменением размера, позиционированием и отступом:
+ =
Для того, чтобы так сделать, нужно выставить такие настройки:
1) Тип наложения второй картинки — «Наложить PNG, GIF, TIFF картинку с прозрачным фоном»;
2) Автоматическая подгонка размера 2-й картинки — «использовать ручное изменение размера в %»;
3) Размер 2-й картинки относительно «ширины и высоты» 1-й картинки — «30%»;
4) Привязка расположения 2-й картинки над 1-й — «справа внизу»;
5) Смещение или отступ 2-й картинки от указанного расположения — «по оси X:30 и Y:30 в px (пикселях)».
Остальные настройки остались без изменений.

Для наложения фоторамки, например, в формате PNG с прозрачностью, можно указать такие параметры:
1) Тип наложения второй картинки — «Наложить PNG, GIF, TIFF картинку с прозрачным фоном»;
2) Автоматическая подгонка размера 2-й картинки — «включена, но наоборот, 1-ю картинку подогнать под размер 2-й».
Остальное оставить так, как было выставлено по умолчанию.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *