Наложить полупрозрачный блок на фото и текст

Question

Нужно добавить на фотографию полупрозрачный черный блок, чтобы затемнить и по центру добавить текст. Пример: на прикрепленной фотографии. Подскажите, как это сделать? Насколько знаю, нужно работать с псевдоэлементами

Вот мой вариант: Но здесь я вручную затемнил изображение в Фотошопе, хотелось бы делать это с помощью css. А также, выравнивать не флексом.

 <div style="display: flex; align-items: center; justify-content: center; flex-direction: column; background-image: url(images/bcg.JPEG); background-size: 100% 100%; height: 40%;">

 <div style="padding: 7px; text-align: center; font-weight: bold; font-size: 180%; color: #cc8f33">Текст по центру</div>

 </div>

Answer 1

Как вариант можно положить картинку, фон и текст в контейнер и там уже располагать их как угодно. Фон накладывается на картинку с прозрачностью, выравнивать текст - в зависимости от ситуации. В данном примере исхожу из предположения, что высота родителя известна.

div.container {
  width: 400px;
  height: 300px;
  position: relative;
  line-height: 300px;
}

div img {
  object-fit: cover;
  object-position: center;
  height: 100%;
  max-width: 100%;
  min-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

div.bg {
  background-color: #000;
  opacity: 0.5;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

div.text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}

div.text div {
  width: 100%;
  vertical-align: middle;
  line-height: normal;
  display: inline-block;
  font-size: 180%;
  color: #fff;
  text-align: center;
}

<div class="container">
  <img src="http://volyninfo.com/core/wp-content/uploads/2016/09/70664-300x206.jpg" />
  <div class="bg"></div>
  <div class="text">
    <div>Текст по центру<br />Текст по центру<br />Текст по центру<br /></div>
  </div>
</div>

БЛОГ НА HUSL

Наложить полупрозрачный блок на фото и текст

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