html - CSS - 如何在背景图片之上获取 div？

Question

我有一半页面的背景图片，下面有一个 div，我还想将它的四分之一放在背景图片上方。我试图将 padding-top 放在配置文件类上，但在将背景图片和配置文件包装在 div 中时它不起作用。

CSS:

.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;
}

HTML:

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

Answer 1

您可以对第一个元素应用负的 margin-bottom。

.background-pic {
  background-image: url(https://www.placecage.com/600/400);
  height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: -100px;
}

.content {
  padding-top: 300px;
  background: rgba(10, 150, 10, .4);
}

<div class="background-pic"></div>
<div class="content">Profile content</div>