Как можно поставить картинку поверх другой? Возможно ли это сделать с помощью языка css?

Question

Я хочу поставить логотип на картинку,возможно ли это реализовать?

Answer 1

div {
  position: relative;
}
.inner {
  border: 2px solid #000;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
}

<div> 
  <img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg" class="inner"/>
  <img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg"/>
</div>

Answer 2

Картинку также можно задать блоком div с background-image.

div {
  display: flex;
  align-items: flex-end;
  background-image: url(http://ipic.su/img/img7/fs/Screenshotfrom2020-06-0313-18-56.1591179558.png);
  height: 400px;
}
img {
  position: relative;
  left: 20px;
  width: 50px;
}

<div>
  <img src="https://cdn.svgporn.com/logos/google-icon.svg">
</div>

Выравнивать можно через флексы и относительное позиционирование, а можно через абсолютное:

div {
  background-image: url(https://alatvesti.ru/wp-content/uploads/2019/09/les.jpg);
  position: relative;
  height: 200px;
  width: 600px;
}
img {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 25px;
}

<div>
  <img src="https://cdn.svgporn.com/logos/google-icon.svg">
</div>

БЛОГ НА HUSL

Как можно поставить картинку поверх другой? Возможно ли это сделать с помощью языка css?

Ответы (2 шт):