CSS-如何在背景圖片上獲取div？

Question

我在頁面的一半有一個背景圖像，在它的下面有一個div，我也想將它的四分之一放在背景圖像之上。 我試圖將padding-top放在profile類上，但是在將background-pic和profile封裝在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> 

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 CSS中，添加屬性position : relative ，然后根據需要更改.profile內的文本填充。