Как сделать фон прозрачным CSS

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

Пример

Lorem Ipsum

HTML


<div class="bg-ex-transparent">
  <div class="img-transparent">
    <span>Lorem Ipsum</span>
  </div>
</div>

CSS


.bg-ex-transparent{
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.img-transparent{
  background: rgba(0, 0, 0, 0.6); /* Прозрачность */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%; /* Для ширины на весь экран нужно прописать 100% */
  height: 300px;
}