Перейти к содержимому

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

  • автор:

Как наложить одну картинку на другую средствами 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

" /></p>
<p><div >   </div>
<p> css .con .top </p>
<h2>Наложить картинку на картинку в пределах блока</h2>
<p>надо срочно поставить картинку на картинку. знаю что ставится абсолютом , но вот проблема такая , что из за этого сам wrap уезжает на верх экрана , а надо , чтобы этот блок не улетал наверх экрана. Надо , чтобы картинки наложились , но внутри блока и нечего не куда не улетало бы.</p>
<pre><code>.wrap img < position: absolute; top: 0; left: 0; >.wrap < img:last-child < &:hover < opacity: 0; >> ></code></pre>
<pre><code> <div > <img decoding="async" src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" alt="" style="">  </div> <div > <img decoding="async" src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" alt="" style="">  </div> <div > <img decoding="async" src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" alt="" style="">  </div> <div > <img decoding="async" src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" alt="" style="">  </div> <div > <img decoding="async" src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" alt="" style="">  </div></code></pre>
<h2>Как адаптивно наложить картинку на картинку средствами CSS?</h2>
<p><img decoding="async" src="https://habrastorage.org/files/e9c/60f/711/e9c60f7119014d00b7fbfc683182593e.jpg" alt="e9c60f7119014d00b7fbfc683182593e.jpg" /></p>
<p>Подскажите пожалуйста как решить следующую проблему: <br />Есть основное фото 1.jpg мне нужно сверху этого изображения наложить другую картинку 2.png. <br />Вторая картинка, которая сверху должна позиционироваться не по центру а в определенном месте. Самая сложная для меня задача это совмещение должно быть адаптивным и при изменении размера экрана все должно сжиматься корректно не меняя своего позиционирования. </p>
<ul>
<li>Вопрос задан более трёх лет назад</li>
<li>12997 просмотров</li>
</ul>
<p>Комментировать<br />
<strong>Решения вопроса 1</strong><br />
Денис Букреев @denisbookreev<br />
Попробуй картинке с футболкой это дать:</p>
<pre><code lang="css">display: block; position: relative; width: 90%; /* это не важно */</code></pre>
<p>А поверх дай картинке вот такую бороду:</p>
<pre><code lang="css">display: block; width: 30%; /* это наверное уже у тебя в js будет вычисляться */ position: absolute; top: 22%; left: 40%; /* тоже через js будешь вычислять */</code></pre>
<p>Ответ написан более трёх лет назад<br />
Нравится 3  <strong>1</strong> комментарий<br />
Распишите пожалуйста подробнее(<br />
<strong>Ответы на вопрос 1</strong><br />
Павел Радьков @paulradzkov<br />
Дизайнер, верстальщик, начальник отдела UI</p>
<p>Внутрь контейнера svg подгружайте две картинки, спрайт позиционируете относительно майки. Сам svg ведет себя как цельная картинка. Можете еще с эффектами наложения поэкспериментировать.</p>
<p>Ответ написан более трёх лет назад<br />
Нравится 2  <strong>5</strong> комментариев</p>
<p><img decoding="async" src="https://habrastorage.org/r/w60/files/748/e30/1e0/748e301e06044d74b8f0d83a955eec6f.jpg" alt="ak-biznes" /></p>
<p>Андрей Кривенко @ak-biznes Автор вопроса</p>
<p>Павел спасибо Вы предложили отличное решение моей проблемы — супер. Попробовал все отлично работает на любых разрешениях, ничего не плывет и не сьежает.</p>
<p><img decoding="async" src="https://habrastorage.org/r/w60/files/748/e30/1e0/748e301e06044d74b8f0d83a955eec6f.jpg" alt="ak-biznes" /></p>
<p>Андрей Кривенко @ak-biznes Автор вопроса</p>
<p>Павел подскажите пожалуйста из-за чего у меня изображения теряют в качестве? Мелкая елочка появляется. Я так подозреваю что нужно правильно выставить следующие значения? <br />viewBox=»0 0 1000 1000″ <br />Не могли бы Вы подсказать за что отвечают эти значения? Это пиксели, проценты или какой то масштаб? Что это? <br />Заранее большое спасибо!</p>
<p>Павел Радьков @paulradzkov</p>
<p>Андрей Кривенко: Картинка майки в моем примере размером 1000×1000px, поэтому и viewBox=»0 0 1000 1000″ — размер полотна, в котором единицы измерения совпадают с пикселями. (x y width height)</p>
<p>А width=»100%» height=»100%» на элементе svg — это html-аттрибуты, такие же, как для img. Вы их можете убрать, переопределить через css и т.д.</p>
<p>Вам нужно во viewBox вписать размеры вашей картинки с майкой. Координаты x=»0″ y=»0″ — это точка монтирования — левый верхний угол картинки. Он совпадает с началом координат. height=»1000″ width=»1000″ — размеры картинки (в пикселях, но без указания единиц измерения). Для майки должны совпадать с viewBox.</p>
<p>Для наклейки на майку аналогично. Масштаб картинки с наклейкой должен быть не меньше, чем у майки. Т.е. не стоит наклейку растягивать больше, чем ее исходные пиксели.</p>
<p><img decoding="async" src="https://habrastorage.org/r/w60/files/748/e30/1e0/748e301e06044d74b8f0d83a955eec6f.jpg" alt="ak-biznes" /></p>
<p>Андрей Кривенко @ak-biznes Автор вопроса</p>
<p>Павел Радьков: Спасибо большое за такой развернутый ответ. Видимо svg не очень подходит для растровых картинок, все таки это под векторный формат изображений. При сжимании (а в адаптивной верстке без этого никуда) изображение из-за высокого количества точек на пиксель по краям становится елочкой(теряется качество отображения). Жаль наверное мне этот метод не подойдет, хотя все выравнивает и центрирует очень класно(((</p>
<h2>Наложить картинку на картинку</h2>
<p><strong>Не получается наложить картинку на картинку слоями</strong><br />Здравствуйте не получается наложить картинку на картинку слоями вот мой случай <table.</p>
<p><img decoding="async" src="https://cyberstatic.net/images/misc/tick.png" /></p>
<p> <strong>HTML — Надо: вставить картинку в картинку, в эту картинку, ссылку в картинку</strong><br />Вот схема моего сайта. http://s020.***********/i716/1404/8c/254516feacb3.jpg У меня пока что на.</p>
<p><strong>Наложить на картинку текст?</strong><br />Здравствуйте! У меня есть блок, в самом его верху есть картинка. Так вот, как прямо на картинку.</p>
<p><img decoding="async" src="https://cyberstatic.net/images/icons/js.jpg" alt="Эксперт JS" /><img decoding="async" src="https://cyberstatic.net/images/icons/html_css.png" alt="Эксперт HTML/CSS" /></p>
<p>2585 / 1676 / 731<br />
Регистрация: 13.03.2010<br />
Сообщений: 5,630</p>
<p><img decoding="async" src="https://cyberstatic.net/images/misc/tick.png" alt="Лучший ответ" /></p>
<p><b>Сообщение было отмечено Bohdan2 как решение</b></p>
<h3>Решение</h3>
<p>Используйте z-index. Или просто поменяйте местами слои.<br />
<b>87844</b> / 49110 / <b>22898</b><br />
Регистрация: 17.06.2006<br />
Сообщений: 92,604<br />
<b>Помогаю со студенческими работами здесь</b></p>
<p>одну картинку наложить на другую<br />Добрый вечер, в заголовок вставляю картинку с градиентом, и сверху хочу наложить другую с городом.</p>
<p>Как наложить кнопку на картинку<br />я ввела код для создания картинки но все равно не могу сделать позицию как на картинке нужно.</p>
<p><img decoding="async" src="https://cyberstatic.net/images/misc/tick.png" /></p>
<p> Как наложить картинку на стык двух дивов?<br />Допустим, есть два дива, их граница находится не на середине страницы, они вместе заполняют 100%.</p>
<p>Можно ли точно наложить картинку на такой же фон?<br />Есть две картинки img1 and img2 одного размера. 1) Можно ли задать каринке img1 фон=img2. 2).</p>
<div class=

Похожие публикации:
  1. Как проверить число на четность javascript
  2. Как создать калькулятор в visual studio 2019
  3. Какая цена стиральной машины vestel wmf2r6100
  4. Сколько стоит honor 30

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

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