Белая полоса над изображением?

Question

Итак, у меня есть фоновое изображение, мне нужно поместить горизонтальную белую полосу поверх этого фонового изображения, чтобы поместить заголовок в полосу. Я знаю, как сделать прямоугольники над изображением в CSS, но мне трудно сделать эту полосу, она не должна быть рамкой, она должна покрывать все фоновое изображение от левого поля до правого края изображения, есть идеи?

Вот фрагмент кода:

.title-image {
  position: fixed;
  height: 230px;
  margin-top: -16px;
  margin-left: -20px;
}

h1 {
  background: white;
  position: absolute;
  font-family: Play;
  color: #c76161;
}

<div class="title">
  <img class="title-image" src="" alt="">
  <h1>Title</h1>      
</div>

Answer 1

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

.box {
  width:200px;
  height:200px;
  line-height:200px;
  font-size:20px;
  text-align:center;
  background:
  linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8))0 50%/100% 80px  no-repeat,
  url(https://lorempixel.com/200/200/);
}

<div class="box">
  some text
</div>

Answer 2

Использовать флексбоксы и фоновые изображения

body{
  margin: 0;
  padding: 0;
}

.image{
  width: 250px;
  height: 250px;
  background-color: red;
  
  display: flex;
  align-items: center;
}

.title_container{
  width: 250px;
  background-color: green;
  text-align: center;
}

<div class="image"><div class="title_container"><h1 class="title">Test</h1></div></div>

Заменить цвет фона: красный; by background-image: url ("yourimage.png");