Как разместить текст на фото?

Question

Как лучше делать такие элементы? делать картинку absolute или текст absolute?
если все же картинку, так как разместить текст если он не по центру, правее?

Answer 1

Либо и картинке и тексту absolute, либо к блоку с текстом добавить background-image.

Answer 2

В целом зависит от того, какой должен быть размером родительский блок.
Как по мне проще использовать такой вариант:

.img-text {
  display: block;
  width: 100%;
  position: relative;
}

.img-text img {
  display: block;
  width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.img-text div {
  display: inline-block;
  background-color: rgba(255,255,255,.75);
  padding: .15em .25em;
  white-space: nowrap;
  position: absolute;
  right: 25%;
  bottom: 10%;
}

<div class="img-text">
  <img src="//i.imgur.com/8G06qBx.png">
  <div>Мороз и солнце</div>
</div>

БЛОГ НА HUSL

Как разместить текст на фото?

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