0

.section1{
	height:843px;
	width: 100%;
	padding-top: 50px;
	position: relative;
	
}
.imgcenter{
	display: block;
	margin: auto;

}
.deskr{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);

}
<div class="section1">
		<img src="img/10.png" alt="Alt" class=imgcenter >
		<span class="deskr">
			Какой-то текст
		</span>
	
	</div>

Мне нужно чтобы текст был поверх картинки и затемнение там же.Как показано на картинке. Пожалуйста, помогите спать не могу

2
  • могли бы Вы продублировать Ваш пример на codepen.io ? 6 фев 2020 в 1:45
  • просто для .deskr добавьте z-index="1" 6 фев 2020 в 4:51

1 ответ 1

0

Чуть-чуть подправил название классов:

.img-block {
  display: flex;
  flex-wrap: wrap;
  margin-left: -5px;
  margin-right: -5px;
}
.img-block__item {
 padding: 5px;
}
.img-block__content {
  position: relative;
}
.img-block__text {
  position: absolute;
  background-color: rgba(0,0,0,.5);
  display: flex;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  color: #fff;
}
<div class="img-block">
  <div class="img-block__item">
    <div class="img-block__content">
      <img src="https://via.placeholder.com/150" alt="Alt" class=img-block__img >
      <span class="img-block__text">
        Какой-то текст
      </span>
    </div>
  </div>
  <div class="img-block__item">
    <div class="img-block__content">
      <img src="https://via.placeholder.com/150" alt="Alt" class=img-block__img >
      <span class="img-block__text">
        Какой-то текст
      </span>
    </div>
  </div>
  <div class="img-block__item">
    <div class="img-block__content">
      <img src="https://via.placeholder.com/150" alt="Alt" class=img-block__img >
      <span class="img-block__text">
        Какой-то текст
      </span>
    </div>
  </div>
</div>
`

2
  • Спасибо огромное!
    – jadesheart
    6 фев 2020 в 16:32
  • @ЯрославПрокофьев выделите пожалуйста, как верный ответ, спасибо 7 фев 2020 в 10:07

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.