Как создать белую рамку с перекрытием изображения

Question

Я пытаюсь создать это белое текстовое поле с заголовком и содержимым. У меня уже есть навигационная панель и фоновое изображение. Мне нужно создать этот контейнер. Кто-нибудь может мне помочь?

Спасибо ] 1

HTML:

 ```<div class="container-fluid bgImage">
  <div class="container">
    <div class="row justify-content-center">
        <h1
          class="text-bottom text-center text-white"
          style="font-family: 'Oswald', sans-serif; font-size: 40px;">
          Realize o seu plano Canadá conosco!
        </h1>
    </div>
  </div>
</div>```

CSS:

```.bgImage {
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    url(https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fnice%2F&psig=AOvVaw2j1DWCKF-BDyEOl8dckied&ust=1585611293317000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjVssbswOgCFQAAAAAdAAAAABAD) center center / cover;
    height: 100vh;
    display: flex;
    display: center;
}```

Answer 1

Вы можете добавить это правило css к селектору text-bottom, чтобы достичь того, что вы ищете.

.text-bottom {
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 80%;
  width: 50%;
  text-align: center;
  padding: 30px;
}