Как наложить картинку на картинку в html
Перейти к содержимому

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

  • автор:

Как наложить одну картинку на другую средствами html?

Здравствуйте! Подскажите как наложить одну картинку на другую средствами html? Например есть шапка (heder) сайта. В определенном месте надо наложит к примеру flash логотип или картинку с прозрачностью (например в png).. Рыл инет ничего путевого, либо криво отображается либо еще что то. Спасибо. P.S. Желательно конкретно объяснить.

Статьи о Форекс. Психологические аспекты.. (http://botagovo.ru/)

  • eTarget 2011:Панельная дискуссия «Стратегия и планирование рекламной кампании в интернете»
  • eTarget 2011: Круглый стол «Реклама в онлайн-видео»
  • Могут ли «плохие» входящие ссылки привести к ухудшению ранжирования?

29 января 2011, 08:40

Это делается средствами css Смотрите в сторону position:absolute .

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

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

 class="container">  src="image1.jpg" class="image image1" />  src="image2.jpg" class="image image2" />  
.container  position: relative; > .image  width: 300px; height: 200px; > .image1  position: absolute; top: 0; left: 0; > .image2  position: absolute; top: 0; left: 0; > 

В данном примере изображения с размерами 300×200 будут распологаться одна над другой.

Фон или картинку на картинку CSS

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

Отслеживать
задан 28 июл 2017 в 0:11
1,592 2 2 золотых знака 23 23 серебряных знака 45 45 бронзовых знаков

3 ответа 3

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

Для наложения картинок друг на друга нужно взять элементы и наложить их друг на друга (к примеру с помощью абсолютного позиционирования). Верхние элементы должны быть полупрозрачными.

Допустим есть 2 картинки:

Природа 1

Природа 2

body < /* необязательные стили для демонстрации */ margin: 0; >.image-overlapping < /* устанавливаем размеры контейнера */ width: 100vw; height: 100vh; background-image: url("https://i.stack.imgur.com/DqIv7.jpg"); /* делаем чтобы картинка полностью растягивалась, необязательный стиль */ background-size: 100% 100%; /* позиционирование относительно контейнера */ position: relative; >.image-overlapping:after < content: ""; /* абсолютное позиционирование */ position: absolute; /* растягиваем на всю ширину и высоту */ left: 0; right: 0; top: 0; bottom: 0; /* добавляем полупрозрачность */ opacity: 0.7; /* делаем чтобы полупрозрачный элемент располагался поверх основного блока */ z-index: 1; background-image: url("https://i.stack.imgur.com/bleHC.jpg"); /* делаем чтобы картинка полностью растягивалась, необязательный стиль */ background-size: 100% 100%; >

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

619d709db0f98809963835.png

У меня есть две картинки, круг и квадрат, мне нужно сделать вот так

619d70cc46362795431283.png

но получается вот так

Как правильно будет это сделать? Я сделал этот блок в html (это правая часть страницы)

 

и в css задал этому блоку бекграунд имейдж — этот круг

& .packing_right< background-image: url(../images/Background_elipse.png); background-repeat: no-repeat; >
  • Вопрос задан более двух лет назад
  • 1164 просмотра

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

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