Question

我的背景图片没有显示，我也不知道为什么。我已经通读了其他一些主题，但是没有建议起作用。

背景图像的路径正确，这不是问题。我已经添加了高度，大小/位置等。

.images {
  position: relative;
  height: 100%;
  width: 100%;
}

#slideshow {
  display: block;
  position: absolute;
  background: url("links/slideshow/_anx_tote2.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100% bottom;
  height: 100%;
  z-index: -1;
}

<div class="images">
  <div id="slideshow"></div>
</div>

背景图片应覆盖屏幕的右半部分。

Answer 1

* {
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
}

.images {
  position: relative;
  height: 100%;
  width: 100%;
}

#slideshow {
  display: block;
  position: absolute;
  width: 100%;
  background-image: url("https://picsum.photos/200");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% bottom;
  height: 100%;
  z-index: -1;
}

<div class="images">
  <div id="slideshow"></div>
</div>

您需要为正文和HTML添加100％的高度。

Answer 2

由于未将宽度和高度设置为#slideshow，因此无法显示图像。

将百分比高度添加到div中，必须首先确定高度。有关更多信息，请参见here。

因此，我已将height: 100vh;和width: 100%添加到#slideshow；

.images {
  position: relative;
  height: 100%;
  width: 100%;
}

#slideshow {
  display: block;
  position: absolute;
  background: url("https://i.imgur.com/WLimwqR.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100% bottom;
  height: 100vh;
  width: 100%;
  z-index: -1;
}

<div class="images">
  <div id="slideshow"></div>
</div>

Answer 3

 #slideshow {
background: url(links/slideshow/_anx_tote2.jpg) no-repeat transparent;
background-size: cover;
height: 100%; 
}

如何修复未显示的背景img

3 个答案: