如何在背景图像后添加页脚？
Posted
技术标签:
【中文标题】如何在背景图像后添加页脚？【英文标题】：how to add footer after background-img? 【发布时间】：2021-09-24 20:13:44 【问题描述】：我尝试添加页脚，但它添加在我页面底部的背景图像之上。我试图从页脚中删除“显示：固定”，但出现了水平滚动。我该如何解决这个问题？
我希望当您滚动页面时页脚始终在屏幕上可见。
这里有更详细的代码片段，如果你们能提供帮助，我将不胜感激。
html,
body
height: 100%;
font-family: 'Google Sans',Roboto,Arial,sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
body
background-image: url("/img/bg-new-edit.jpg");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-size: cover;
position: relative;
/* Basic styling */
*
box-sizing: border-box;
padding: 0;
margin: 0;
h2
font-weight: 350;
margin: 580px 40px;
footer
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: gray;
text-align: center;
background-color: white;
<body>
<nav>
<ul class="menu">
<li class="logo"><a href="#"><img class="logo" src="img/TARRAHJEWELRY-LOGO.png"></a></li>
<li class="item"><a href="#">Home</a></li>
<li class="item"><a href="#">About</a></li>
<li class="item has-submenu dropdown">
<a tabindex="0">Bridal Jewelry</a>
<ul class="submenu dropdown-content">
<li class="subitem"><a href="engagement.html">Engagement</a></li>
<li class="subitem"><a href="#">Men Wedding</a></li>
<li class="subitem"><a href="#">Women Wedding</a></li>
</ul>
</li>
<li class="item has-submenu dropdown">
<a tabindex="0">Collection</a>
<ul class="submenu dropdown-content">
<li class="subitem"><a href="#">Ring</a></li>
<li class="subitem"><a href="#">Necklace</a></li>
<li class="subitem"><a href="#">Earring</a></li>
<li class="subitem"><a href="#">Bracelet</a></li>
</ul>
</li>
<li class="item"><a href="#">Contact</a>
</li>
<li class="item button"><a href="#">My Account</a></li>
<li class="item button"><a href="#">Cart</a></li>
<li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
</ul>
</nav>
<h2>We believe people who live life in their special way,<br> deserve unique jewelry.</h2>
<footer><p>Footer</p></footer>
<div class="clearfix"></div>
</body>【问题讨论】：
您需要更具体地说明页脚定位的预期行为，滚动页面时它是否始终在屏幕上可见，或者您只是希望它底部对齐（如果有）内容不够？此外，您的 sn-p 不工作，您需要将 HTML 和 CSS 添加到 sn-p 并检查它是否工作（按 sn-p 编辑器中的 RUN 按钮，检查它在您的真实站点上的样子）。 背景图片应用于什么。如果是body 标签，您可能需要调整您的html。考虑minimal reproducible example
抱歉没有提供足够的细节。我刚刚用 html 和 css 编辑了代码片段。谢谢！
【参考方案1】：
选择页脚
footer
bottom: 0;
position: fixed
请注意，这会导致出现滚动条 删除滚动条
body
overflow: hidden
That should solve your problem
【讨论】：
下次提问的时候最好加上你的html代码。它使人们更容易回答您的问题 感谢您的评论。我刚刚添加了 html 和更详细的 css。 没问题，我已经看到你的代码，我已经更新了我的回复。以上是关于如何在背景图像后添加页脚？的主要内容，如果未能解决你的问题，请参考以下文章