Question

我们的设计团队提出了一个在着陆页上使用完整背景图片的概念，但之后只有剩余页面页脚上的图像，主要内容在白色背景上。

因此，作为一个快速模拟来说明这个概念，着陆页可能是：

虽然该网站的大部分内容是：

这提出了一个问题，因为我们显然不知道它所显示的窗口大小，所以它保持所有页面的页脚条一致，我可能必须使用整页背景图像和然后用白色阻挡大部分。

我正在努力在CSS中做到这一点（我是一个后来的开发人员，他已经被用来做这件事）。我为粘性页脚采用了以下模式：

html{
  height: 100%;
  margin: 0;
}

body {
    background-image: url("iStock-507452790.jpg");
    margin: 0; padding: 0;
    background-size: 100%;
    height: 100%;
}

.wrapper {
  min-height: 100%;
  background-color: white;
  margin-bottom: -50px;
}

.footer, .push {
  height: 50px;
}

<body>
  <div class="wrapper">
      content!
    <div class="push"></div>
  </div>
  <footer class="footer">
    footer!
  </footer>
</body>

但这只会导致整个页面填充包装器上指定的背景颜色。

有没有办法在大部分页面上变白并且只是将条带保持在底部？如果有必要，我不反对使用其他粘性页脚方法。

Answer 1

试试这个

body,
html {
  height: 100vh;
  padding: 0;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  color: #000;
  font-size: 25px;
}

.footer {
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  background: url('https://dummyimage.com/600x400/000/fff') center 
  center no-repeat;
  background-size: cover;
}

<div class="wrapper">
  content!
  <footer class="footer">
    footer!
  </footer>
</div>

Answer 2

我也稍微改变了DOM。希望这会有所帮助。

如果您不需要，也可以删除页脚文本。

＆＃13;

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-image: url('http://www.lavitaoggi.com/wp-content/uploads/2014/02/8e69oceano-acqua-bolle-aria-ossigeno.jpg');
}

.wrapper {
  min-height: 90vh;
  background-color: white;
}

.footer {
  height: 10vh;
  color: #fff;
}

＆＃13;

<div class="wrapper">
  content! loream
</div>
<footer class="footer">
  footer!s
</footer>

＆＃13;

Answer 3

＆＃13;

html,body{
  height: 100%;
  width:100%;
  margin: 0;
}
.page{
  height: 100vh;
  width:100%;
  display:inline-block;
  background-image: url('http://ulatbambu.com/images/google-images-water-background-clipart-35.jpg');
  margin: 0;
  padding: 0;
  background-size: 100%;
  background-color:blue;
}
.wrapper {
  min-height: 85%;
  background-color: white;
  margin-bottom: -50px;
  width:100%;
}

.footer, .push {
      height: 50px;
    background-color: transparent;
    position: absolute;
    display:inline-block;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    text-align:center;
    padding-top:20%;
}

＆＃13;

<body>
<div class="page">
  <div class="wrapper">
      content!
    <div class="push"></div>
  </div>
  <footer class="footer">
    <span>footer!</span>
  </footer>
 </div>
</body>

＆＃13;

试试这个

使用CSS维护背景的页脚条

3 个答案: