0

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

<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>
3
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 20 ноя 2021 в 16:40
  • position........
    – Air
    20 ноя 2021 в 16:45
  • Опишите нормально вопрос. 20 ноя 2021 в 17:05

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.