1

Как можно добавить прозрачный блок поверх картинки, чтобы он растягивался вместе с картинкой по ширине экрана?

введите сюда описание изображения

Если бы требовалось просто добавить прозрачную полосу поверх картинки, то всё было бы предельно просто: ставим родительскому блоку относительное позиционирование и настраиваем положение блока. Но так они не будет растягиваться по ширине экрана. Чтобы сократить количество кода, картинку желательно сделать фоновой для родительского блока.

2 ответа 2

2

*{
  padding: 0;
  margin: 0;
}

section{
  position: relative;
  min-height: 400px;
  background: url('http://www.planwallpaper.com/static/images/Nature-Wallpapers-6.jpg') no-repeat center top;  
  background-size: cover;
}
section:before{
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 80px;
  background: rgba(0,0,0,0.5);
}
<section></section>

1
<div id="all">
   <img class="bg" src="/ваш путь/">
   <div id="opacity-block">
      <font>Прозрачный блок</font>
   </div>
</div>

<style>
   all{
      position: relative; //не убирать!
      width: 100%; //ширина родительского блока
   }
   .bg{
      width: 100%; //ширина изображения
   }
   #opacity_block{
      position: absolute; //не убирать
      z-index: 1000; //ставим перед всеми объектами
      width: 100%; //если = ширине картинки, то по ширине закроет ее полностью
      top: 0; //замените top на bottom и блок "прилипнет" ко дну картинки
      right: 0; //замените right на left и блок "прилипнет" к левой стороне картинки
      opacity: 0.5; // значение прозрачности блока от 0 до 1
      height: 50px; //высота прозрачного блока
      background: white; //цвет блока
   }
</style>

Ваш ответ

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

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