html - 背景图像未显示全分辨率

Question

我有一张大约 1200 (w) x 800 (h) 的背景图片，但我只想使用整个 100% 的分辨率。我在这个 div 容器中有一个按钮，但它没有正确显示。背景图像不会扩展到它的全分辨率。它似乎只显示足以让按钮显示。

.endFoot {
  background-image: url('https://via.placeholder.com/900x900');
  background-size: cover;
  width: 100%;
  height: 100%;
}

.customButton {
  position: relative;
  bottom: 0;
  left: 41%;
  padding: 25px 35px;
  font-size: 16px;
  cursor: pointed;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #AB0002;
  border: none;
  border-radius: 15px;
}

<div class="endFoot">
  <a href="link.html"><button class="customButton">TEXT</button></a>
</div>

这是一张小图片，展示出了什么问题与我想要的:

Answer 1

这与背景图片未展开无关。您的 div 不够高，无法显示更多图像。离开图表，您想向 .endFoot 添加一些填充。

background-size: cover; 是一个不错的选择，但您可能还需要考虑将位置居中 background-position: 50% 50%;。

.endFoot {
  background-image: url('https://via.placeholder.com/900x900');
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  background-repeat: no-repeat;
  padding: 400px 0 0 0;
  height: 100%;
}

.customButton {
  position: relative;
  bottom: 0;
  left: 41%;
  padding: 25px 35px;
  font-size: 16px;
  cursor: pointed;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #AB0002;
  border: none;
  border-radius: 15px;
}

<div class="endFoot">
  <a href="link.html"><button class="customButton">TEXT</button></a>
</div>