пр. Мира 620000 Россия +7900-000-00-00
Логотип блога интернет-бродяги

Как расположить одну картинку на фоне другой

Как разместить одну картинку перед другой

Расположить одну картинку на фоне другого изображения возможно при помощи html и css. Для этого, в html я создаю два блочных элемента при помощи тега div и добавляю атрибут class, задав имя селектора. Особенность состоит в том, что див картинки, которая должна находиться перед фоновым изображением, размещаю внутри дива последнего.

Например, у меня есть два изображения — красный квадрат (picture1) размером 200 на 200 пикселей и жёлтый квадрат (picture2) размером 100 на 100 пикселей. Поставлена задача разместить picture2 перед picture1.

Чтобы осуществить задуманное, в HTML создаю вот такую вёрстку:

<div class="picture1"><div class="picture2"></div></div>

Далее, с помощью стилей я управляю вышеуказанными блоками.

.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!

Друзья, плюсаните, вдруг пригодится!

Почитайте похожие материалы

Об авторе: Hobo

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

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

+ 36 = 37

 

Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять