Блог

Главная - Вопросы по программированию - div частичная прозрачность фонового изображения, наследует фоновое изображение тела

div частичная прозрачность фонового изображения, наследует фоновое изображение тела

#html #css

#HTML #css

Вопрос:

У меня есть простая HTML-форма с кнопкой отправки внутри. Тело имеет фоновое изображение: введите описание изображения здесь

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

Второй div имеет абсолютную позицию и, как вы видите, унаследовал фоновое изображение (или прозрачный цвет) от body:

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

Как я могу справиться с этим? Спасибо

Ответ №1:

используйте background-attachment:fixed и применяйте один и тот же фон к стрелке и телу:

 .box {
  width:40%;
  height:100vh;
  margin-left:auto;
  border:2px solid;
  box-sizing:border-box;
  background:#fff;
}

body {
  margin:0;
  background:url(https://picsum.photos/id/1016/800/800) center/cover fixed;
}

.arrow {
  position:absolute;
  height:50vh;
  right:30%;
  top:calc(50% - 25vh);
  border-radius:17%;
  background:url(https://picsum.photos/id/1016/800/800) center/cover fixed;
}  
 <div class="box">

</div>

<img src="https://i.stack.imgur.com/Yr00Q.png" class="arrow">