Как наложить текст с белым фоном на картинку

Question

Как наложить текст с белым фоном на картинку .
Потом это всё будет адаптироваться под разные экраны

<div class="space-disp">
  <img src="img/space-intro1.jpg" alt="" class="margin-img">
  <img src="img/space-intro2.jpg" alt="" class="img-and-block">
  <div class="block-body">
    <h4 class="block-heading">Twelve West Lake</h4>
    <p class="text">Space for up to 150 <br> people</p>
  </div>
</div>

Answer 1

Вариант 1

.space-disp {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.block-body {
  position: absolute;
  padding: 20px;
  background: #fff;
  max-width: 300px;
}

img {
  width: 100%;
}

<div class="space-disp">
  <img src="https://cdn.pixabay.com/photo/2020/12/30/14/23/waterfall-5873630_960_720.jpg" alt="" class="margin-img">
  <img src="https://cdn.pixabay.com/photo/2021/11/15/05/52/red-fox-6796430_960_720.jpg" alt="" class="img-and-block">
  <div class="block-body">
    <h4 class="block-heading">Twelve West Lake</h4>
    <p class="text">Space for up to 150 <br> people</p>
  </div>
</div>

Вариант 2

.space-disp {
  position: relative;
}

.block-body {
  position: absolute;
  padding: 20px;
  background: #fff;
  max-width: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img {
  width: 100%;
}

<div class="space-disp">
  <img src="https://cdn.pixabay.com/photo/2020/12/30/14/23/waterfall-5873630_960_720.jpg" alt="" class="margin-img">
  <img src="https://cdn.pixabay.com/photo/2021/11/15/05/52/red-fox-6796430_960_720.jpg" alt="" class="img-and-block">
  <div class="block-body">
    <h4 class="block-heading">Twelve West Lake</h4>
    <p class="text">Space for up to 150 <br> people</p>
  </div>
</div>

БЛОГ НА HUSL

Как наложить текст с белым фоном на картинку

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