Как наложить одну картинку на другую средствами html?
Здравствуйте! Подскажите как наложить одну картинку на другую средствами html? Например есть шапка (heder) сайта. В определенном месте надо наложит к примеру flash логотип или картинку с прозрачностью (например в png).. Рыл инет ничего путевого, либо криво отображается либо еще что то. Спасибо. P.S. Желательно конкретно объяснить.
Статьи о Форекс. Психологические аспекты.. (http://botagovo.ru/)
29 января 2011, 08:40
Это делается средствами css Смотрите в сторону position:absolute .
29 января 2011, 08:42
dandandan:
Смотрите в сторону position:absolute
На сайте с 18.01.2011
29 января 2011, 08:46
dandandan:
Это делается средствами css Смотрите в сторону position:absolute .
Можно на реальном примере? Например главная картинка header.jpg, а то что наложить logo.swf или logo.png. Что нужно в стилях приписать?
На сайте с 22.08.2007
29 января 2011, 09:06
29 января 2011, 09:08
Наложить картинку на картинку в пределах блока
надо срочно поставить картинку на картинку. знаю что ставится абсолютом , но вот проблема такая , что из за этого сам wrap уезжает на верх экрана , а надо , чтобы этот блок не улетал наверх экрана. Надо , чтобы картинки наложились , но внутри блока и нечего не куда не улетало бы.
.wrap img < position: absolute; top: 0; left: 0; >.wrap < img:last-child < &:hover < opacity: 0; >> >
Как адаптивно наложить картинку на картинку средствами 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 не очень подходит для растровых картинок, все таки это под векторный формат изображений. При сжимании (а в адаптивной верстке без этого никуда) изображение из-за высокого количества точек на пиксель по краям становится елочкой(теряется качество отображения). Жаль наверное мне этот метод не подойдет, хотя все выравнивает и центрирует очень класно(((
Наложить картинку на картинку
Не получается наложить картинку на картинку слоями
Здравствуйте не получается наложить картинку на картинку слоями вот мой случай <table.
HTML — Надо: вставить картинку в картинку, в эту картинку, ссылку в картинку
Вот схема моего сайта. http://s020.***********/i716/1404/8c/254516feacb3.jpg У меня пока что на.
Наложить на картинку текст?
Здравствуйте! У меня есть блок, в самом его верху есть картинка. Так вот, как прямо на картинку.
2585 / 1676 / 731
Регистрация: 13.03.2010
Сообщений: 5,630
Сообщение было отмечено Bohdan2 как решение
Решение
Используйте z-index. Или просто поменяйте местами слои.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
одну картинку наложить на другую
Добрый вечер, в заголовок вставляю картинку с градиентом, и сверху хочу наложить другую с городом.
Как наложить кнопку на картинку
я ввела код для создания картинки но все равно не могу сделать позицию как на картинке нужно.
Как наложить картинку на стык двух дивов?
Допустим, есть два дива, их граница находится не на середине страницы, они вместе заполняют 100%.
Можно ли точно наложить картинку на такой же фон?
Есть две картинки img1 and img2 одного размера. 1) Можно ли задать каринке img1 фон=img2. 2).
