将带有背景图像的文本元素添加到 div 会导致图像周围出现白色 space

Question

我有以下 CSS:

body{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#section-one{
  background-image: url('https://i.picsum.photos/id/738/200/300.jpg?hmac=x-GpfBAQrKyKnrXqne7UJ3rdVnkGD7e-uRhpCcZWb9I'); /*random image*/
  background-repeat:no-repeat;
  background-position: center center;
  background-size: 100%;
  height: 60vh;
}

如果我将其应用到一个空的 div 中：

<div id='section-one'>
</div>

背景图片会生效，周围不会有白色space(https://codepen.io/ob98/pen/JjXEMPK)。但是，当我尝试将文本添加到 #section-one:

<div id='section-one'>
     <ul>
       <li>Item One</li>
       <li>Item Two</li>
       <li>Item Three</li>
     </ul>
     <div id="tagline">
       <h1>Text</h1>
       <h1>Text</h1>
     </div>
 </div>

白色 space 出现在背景图像的上方和右侧。这可以在这里看到：https://codepen.io/ob98/pen/MWyJOMd

如果有人知道导致此问题的原因以及如何解决它，我们将不胜感激。

Answer 1

您有 16 像素的边距环绕您的标签。

给 <ul> 标签一个 id 然后通过应用下面的 css 覆盖默认的类。

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#section-one {
  background-image: url('https://i.picsum.photos/id/738/200/300.jpg?hmac=x-GpfBAQrKyKnrXqne7UJ3rdVnkGD7e-uRhpCcZWb9I');
  /*random image*/
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  height: 60vh;
}
ul#items {
  margin: 0px;
  }

<div id='section-one'>
  <ul id='items'>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
  <div id="tagline">
    <h1>Text</h1>
    <h1>Text</h1>
  </div>
</div>

Answer 2

将 overflow: hidden; 添加到 #section-one id。

body{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#section-one{
  background-image: url('https://i.picsum.photos/id/738/200/300.jpg?hmac=x-GpfBAQrKyKnrXqne7UJ3rdVnkGD7e-uRhpCcZWb9I'); /*random image*/
  background-repeat:no-repeat;
  background-position: center center;
  background-size: 100%;
  height: 60vh;
  overflow: hidden;
}

将带有背景图像的文本元素添加到 div 会导致图像周围出现白色 space

Adding text elements to div with a background-image is causing white space to appear around the image

css

background-image