在封面大小的图像下制作页脚

Question

我正在制作一个网站，我偶然发现了一个小问题。我将图像设置为 height: 100% 和 width;和背景大小：封面；

有什么方法可以让页脚出现，以便您在图片下方滚动吗？

.bg {
  /* The image used */
  background-image: url("./Resources/home_bg.jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

HTML 代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="bg"></div>

  </body>

</html>

Answer 1

听起来你只需要在你的 div 中添加一个 z-index。

footer 的数字较小 z-index，而 .bg 的数字较大。

此外，我添加了一个容器并为页脚添加了背景色，以显示我认为您想要的效果。

.bg {
  /* The image used */
  background-image: url("http://placehold.it/400x400");

  /* Full height */
  height: 100vh;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 10;
}

footer {
  background: #ff0000;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 8;
 }
 
 .container {
 height: 105vh;
 }

<div class="container">
  <div class="bg">BG</div>
  <footer>footer</footer>
</div>

在封面大小的图像下制作页脚

Make footer under cover sized image

html

css

footer