Html CSS-如何在背景图像上获得div？

我有一个背景图像，一半的页面，我有一个div在它下面，我还想把它的四分之一以上的背景图像。我试图在profile类中添加padding top，但在将背景图片和profile包装到div中时，它不起作用

CSS:

HTML:

可以将负边距底部应用于第一个元素

.背景图片{ 背景图像：urlhttps://www.placecage.com/600/400; 高度：400px； 背景位置：中心； 背景重复：无重复； 背景尺寸：封面； 边缘底部：-100px； } .内容{ 填充顶部：300px； 背景：rgba10150,10,4； }

---

Profile content您所需要做的就是在.Profile元素上添加一个负边距。我清理了您的HTML和CSS，以便您可以遵循以下步骤：

.背景图片{ 背景图片：url'https://images.pexels.com/photos/825262/pexels-photo-825262.jpeg'; 背景位置：中心； 背景重复：无重复； 背景尺寸：封面； 高度：500px； 宽度：100%； } .个人资料{ 背景颜色：粉红色； 高度：500px；/*如果您在中放置了足够的内容，则为可选*/ 裕度：-100px自动0自动； 填充：25px 50px； 宽度：600px； } 内容在这里。 在.background pic的CSS中添加一个属性position:absolute

---

在.profile的CSS中添加属性position:relative，然后根据需要更改.profile中文本的填充。

将html和身高指定为100%，以查看div height的百分比您是受欢迎的人。每次我能展示尼古拉斯·凯奇的形象，都会让我开心。

.background-pic{
      background-image: url('https://images.pexels.com/photos/825262/pexels-photo-825262.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
      height: 60%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: rgba(0,0,0,0);
    }

.profile{
  padding-top: 300px;
}

<div class="background-pic">
    </div>
    <div class="container">
      <div class="profile" style="background-color: grey; height : 300px;">
        <div class="profile-pic">
        </div>
      </div>
    </div>