用CSS维护背景页脚

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

所以，作为一个快速模拟多达说明这个概念，着陆页可能是：

虽然大多数网站是：

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

我很努力做到这一点在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>

但这只是导致整个页面充满在包装指定的背景色。

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

来源

2017-07-26 Matt Thrower

所以，你想有'footer'始终显示为背景图像？另外，为什么你的包装器有'最小宽度：100％'？或者这是为了说明问题？ – Rubenxfd

@Rubenxfd对不起，如果我没有解释得很好。如果页面是整页，我希望页脚始终显示背景图像的相同部分，该部分位于页面底部。那有意义吗？包装上没有最小宽度 - 最小高度？ –

刚刚尝试这一点

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>

来源

2017-07-26 09:52:18 LKG

谢谢你的建议，但我认为你的问题是错误的。我希望页脚始终显示背景图像的相应部分，而不是不同的颜色？ –

好吧，那么你可以把脚注放在包装位置 – LKG

@Matt Thrower检查更新的答案。 – LKG

我也改变了DOM一点。希望这可以帮助。

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

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; 
 
}

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

来源

2017-07-26 09:54:37 Aslam

感谢你 - 你的样品正是我所追求的。在我的页面上，它显示的是图像的顶部，而不是页脚中的底部，这很奇怪。我会挖。 –

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%; 
 
}

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

试试这个

来源

2017-07-26 09:58:12 M0ns1f

用CSS维护背景页脚

回答

相关问题