Question

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

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>

Answer 2

您需要做的就是在.profile元素上添加负边距。我清理了你的HTML和CSS，所以你可以按照这个：

.background-pic{
   background-image: url('https://images.pexels.com/photos/825262/pexels-photo-825262.jpeg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 500px;
   width: 100%;
}

.profile{
  background-color: pink;
  height: 500px; /* optional if you put enough content in */
  margin: -100px auto 0 auto;
  padding: 25px 50px;
  width: 600px;
}

<div class="background-pic"></div>
<div class="profile">
   Content goes here.
</div>

演示： https://codepen.io/staypuftman/pen/QrNZPz

Answer 3

在.background-pic的CSS中添加一个属性position : absolute。

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

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

3 个答案: