我想让背景图片透明，在这里找到了一个很好的答案。但是我的页脚折叠到页眉下方的页面顶部。我可以在正文中看到透明图像，但我的主要文章在应用了 html 背景颜色的页脚下方继续。是什么导致页脚折叠？作为 div 的父容器的部分具有定义的宽度。任何帮助，将不胜感激。
html {background: #95A3C2;}
body {
background: white;
background-image: url(_images/pg_p_lewis_bckgrnd.jpg);
width: 960px;
margin: 0 auto 0;
font-family: "minion-pro";
}
section {
width: 960px;
display: block;
position: relative;
}
#trns {
height: auto;
opacity: 0.2; filter: alpha(opacity=20);
position: absolute;
}
#trnsb {
height: auto;
}
#heading {
width: 960px;
}
<body>
<header>
<div id="colA">
</div>
</header>
<section>
<div id="trns">
<div id="trnsb">
<div id="heading">
<div id="colD">empty</div>
</div>
<div id="main">
<div class="text">
<p>text</p>
<p>text</p>
</div>
<div class="image">
<p>Image Gallery</p>
<p><span class="caption">Center image vertically on page and hover to enlarge.</span></p>
<p><img class="img-zoom" src="_images/RL_LEWIS_Alex_KCC_1197_Sur_1.jpg" class="img-thumbnail" alt="lewis land grant" width="259" height="387"></p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div id=copyright>copyright 2016 by Barton Lewis</div>
<div id=hosting>hosting by simply hosting</div>
</footer>
</body>
</html>
最佳答案
您已为 #trns 指定了 绝对 的位置。这样做会从文档的正常流中删除该元素。所以没有什么'推'页脚了。从您的代码中，我看不出给 #trns 绝对位置的理由。您应该能够从您的 css 中删除此声明。
关于html - 页脚在 body 元素中包含透明背景图像的 div 上方折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40965276/