Hobo
Последнее обновлене - 15 января 2023 в 15:56
Расположить одну картинку на фоне другого изображения возможно при помощи HTML и CSS. Для этого, в HTML я создаю два блочных элемента при помощи тега div и добавляю атрибут class, задав имя селектора. Особенность состоит в том, что див картинки, которая должна находиться перед фоновым изображением, размещаю внутри дива последнего.
Например, у меня есть два изображения — красный квадрат (picture1) размером 200 на 200 пикселей и жёлтый квадрат (picture2) размером 100 на 100 пикселей. Поставлена задача разместить picture2 перед picture1.
Чтобы осуществить задуманное, в HTML создаю вот такую вёрстку:
Далее, с помощью стилей я управляю вышеуказанными блоками.
.picture1 {
background: transparent url(//hoboweb.ru/img/picture1.png) no-repeat;
width:200px;
height:200px;
}
.picture2 {
background: transparent url(//hoboweb.ru/img/picture2.png) no-repeat;
position: absolute;
margin: 50px 50px;
width:100px;
height:100px;
}
В результате проделанных действий наложение одной картинки на другую выглядит следующим образом.
Всем WEB!
Оказывается, так просто расположить одну картинку на фоне другой при помощи CSS. Благодарю за помощь.
Да, ничего сложного на самом деле. CSS творит чудеса, с его помощью можно легко размещать один элемент на фоне другого.
Надо было расположить квадрат на фоне прямоугольника в css. Спасибо, то что надо!
Рад, что инструкция оказалась полезной!