Наложить картинку на картинку в пределах блока
надо срочно поставить картинку на картинку. знаю что ставится абсолютом , но вот проблема такая , что из за этого сам wrap уезжает на верх экрана , а надо , чтобы этот блок не улетал наверх экрана. Надо , чтобы картинки наложились , но внутри блока и нечего не куда не улетало бы.
.wrap img < position: absolute; top: 0; left: 0; >.wrap < img:last-child < &:hover < opacity: 0; >> > 
Как наложить div на картинку?
https://jsfiddle.net/h3ufmj67/64/
Нужно было поверх картинки наложить несколько div
Использовал position, но теперь между двумя картинками появился отступ.
А картинки должны идти в стык.
Как поправить?
- Вопрос задан более трёх лет назад
- 4498 просмотров
Комментировать
Решения вопроса 1
position: relative резервирует место в потоке
Обычно для родительского блока используют position: relative, а для внутреннего блока position: absolute.
В данном случае, мне кажется лучше отказаться от абсолютного или относительного позиционирования текста и сверстать например так.
Ответ написан более трёх лет назад
Нравится 3 2 комментария
Антон @anton99zel Автор вопроса
Виктория Шумская Может подскажите, как сделать, чтобы картинка не обрезалась ни по ширине, ни по высоте (сразу не заметил)?
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- HTML
- +1 ещё
Как пофиксти проблему с амперсантом?
- 1 подписчик
- 14 часов назад
- 65 просмотров
Как адаптивно наложить картинку на картинку средствами CSS?
Подскажите пожалуйста как решить следующую проблему:
Есть основное фото 1.jpg мне нужно сверху этого изображения наложить другую картинку 2.png.
Вторая картинка, которая сверху должна позиционироваться не по центру а в определенном месте. Самая сложная для меня задача это совмещение должно быть адаптивным и при изменении размера экрана все должно сжиматься корректно не меняя своего позиционирования.
- Вопрос задан более трёх лет назад
- 12997 просмотров
Комментировать
Решения вопроса 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 не очень подходит для растровых картинок, все таки это под векторный формат изображений. При сжимании (а в адаптивной верстке без этого никуда) изображение из-за высокого количества точек на пиксель по краям становится елочкой(теряется качество отображения). Жаль наверное мне этот метод не подойдет, хотя все выравнивает и центрирует очень класно(((
Бесплатно выполните наложение фото в режиме онлайн
За считанные секунды наложите фото, чтобы вместе они выглядели по-новому.
Благодаря бесчисленным способам наложения изображений, для творчества открываются неограниченные возможности!
Выполните наложение фото сейчас
Мгновенно наложение фото на фото
Бесплатный редактор фото онлайн Fotor супер-облегчает задание наложения картинки на картинку. Просто отправьте два изображения или более, затем воспользуйтесь инструментами перетаскивания мышью редактора Fotor, чтобы их перетаскивать, поворачивать или изменять их размеры, пока не найдете совершенную комбинацию! Воспользуйтесь возможностью избежать загрузки какого-либо программного обеспечения — выполните все, что необходимо, в своем веб-браузере! Это просто и быстро.
Накладывайте изображения друг на друга, чтобы создавать эффекты двойной выдержки
При помощи Fotor с легкостью примените к своим фото модный эффект двойной выдержки. Все что нужно — это выбрать два изображения, затем корректировать уровень прозрачности, чтобы выполнить их слияние и совмещение в одно изображение. За считанные секунды вы можете создать призрачное, сюрреалистическое фото. Поэкспериментируйте с этим сегодня, чтобы у ваших снимков появилось мечтательное настроение.
Накладывайте друг на друга несколько изображений, чтобы творить мечту
Откройте в себе гениальные творческие способности, накладывая фото. Вы можете воспользоваться средством удаления фона на основе искусственного интеллекта, чтобы мгновенно удалять из изображений людей, животных и какие-либо другие объекты. Таким образом, вы сможете комбинировать элементы и создавать творческие составные изображения. Помимо этого, у вас появится доступ к огромной библиотеке элементов дизайна. Добавляйте наклейки, значки, шрифты или иллюстрации, чтобы создавать выдающиеся творения дизайна!
Переместите свои фотографии на более высокий уровень при помощи фото редактора без изъянов
Fotor — это универсальный фото редактор, который предлагает разнообразные инструменты для редактирования фотографий. Этот редактор позволяет профессионально редактировать изображения и превращать их из посредственных в фантастические. В Fotor есть все — от наложения изображений до применения фото эффектов, улучшения качества фотографий и ретуширования портретов. Зарегистрируйтесь в Fotor прямо сейчас и бесплатно получите доступ ко всем потрясающим функциям и инструментам.
Как накладывать фото?
- При помощи редактора фото онлайн Fotor вы можете накладывать два изображения, чтобы бесплатно создавать ослепительные фотографии. Чтобы наложить изображения, сначала щелкните кнопку «Выполните наложение изображений сейчас» и отправьте одно фото, которое желаете редактировать в Fotor.
- Щелкните кнопку «Элементы» слева, затем загрузите другое фото, которое желаете наложить. После этого фотографии немедленно отобразятся на холсте. Перетаскивайте фото, чтобы корректировать композицию согласно своим предпочтениям. У вас также есть возможность регулировать прозрачность и размеры изображений.
- Помимо этого, в Fotor есть множество функций для редактирования. Вы можете добавить текст, этикетки и фото рамки, применить фото фильтры, корректировать освещение, экспозицию, контрастность и многое другое посредством нескольких щелчков мыши.
- По завершении редактирования щелкните кнопку «Загрузить» в верхней части панели инструментов, чтобы экспортировать изображение в формате JPG или PNG.
Часто задаваемые вопросы по наложению фото
Наложите одно фото на другое изображение в режиме онлайн за секунды
Исследуйте множество удобных инструментов редактирования и функций, которые предлагаются редактором фото Fotor. Вы можете с легкостью накладывать изображения одно на другое или добавлять изображение к другим изображениям!