时间戳

首页 > 解决方案 > div部分背景图片透明度，继承body背景图片

html - div部分背景图片透明度，继承body背景图片

问题描述

我有一个简单的 HTML 表单，里面有一个提交按钮。身体有一个背景图片： 在此处输入图像描述

我想用从 body 继承的图像显示另一个 div，如下所示： 在此处输入图像描述

第二个 div 具有绝对位置，如您所见，继承自 body 的背景图像（或透明颜色）：

在此处输入图像描述

我怎么能做到这一点？谢谢

标签： htmlcss

解决方案

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">

推荐阅读