背景图片未显示完整分辨率

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>

Answer 2

如果您希望endFoot div具有与背景相同的高度，请将高度设置为800px，因为在这种情况下100％不会改变任何内容。 还要将endFoot位置设置为相对位置，以便将botton放置在正确的位置。

Answer 3

如果您要获得全屏背景，请尝试：

.endFoot {
  width: 100vw;
  height: 100vh;
}

有关vh和vw单位的浏览器支持信息，请检查：https://caniuse.com/#feat=viewport-units

Answer 4

只需将 text-align：center 添加到 .endFoot 类以使居中按钮，然后将边距添加到 .customButton < / strong>类，以便在底部留一些空间。

.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 0px;
  height: 100%;
  position: relative;
  text-align: center;
}

.customButton {
  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;
  margin-bottom: 10px; 
}

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