页脚在 div 上方折叠，在 body 元素中包含透明背景图像
Posted
技术标签:
【中文标题】页脚在 div 上方折叠，在 body 元素中包含透明背景图像【英文标题】：footer collapsing above div containing transparent background image in body element 【发布时间】：2017-04-19 07:35:15 【问题描述】：我想让背景图片透明，并在这里找到了一个很好的答案。但是我的页脚折叠到页眉下方的页面顶部。我可以在正文中看到透明图像，但我的主要文章在页脚下方继续应用了 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" ></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>
【问题讨论】：
请提供完整的代码示例。 我做了，但我想我没有提供足够的东西？我是新来的，所以你能告诉我我遗漏了什么是相关的吗？谢谢。 尝试添加一些html代码。 我添加了更多的 html。这有帮助吗？ 【参考方案1】：你给了#trns 一个position absolute。这样做会从文档的正常流程中删除元素。所以没有什么“推动”页脚向下。从您的代码中，我看不出给#trns 一个绝对位置的理由。您应该可以从您的 css 中删除此声明。
【讨论】：
谢谢。我发现使背景图像透明的解决方案来自另一个帖子中说的人：“有一个位置：绝对的 ；在#main 之前和与#main 相同的高度，然后应用背景图像和不透明度：0.2；过滤器：alpha（不透明度=20）。”但是您似乎是正确的，当我删除绝对页脚时，页脚就位。这是我遇到的另一个问题：我文章中的文本也显示为透明。我不希望它是 - 只是背景图像。关于如何纠正它的任何想法？谢谢。 您已将所有内容都包裹在#trns div 中，然后将此 div 的不透明度设为 0.2。因此里面的一切都会有这种不透明性。你需要做的是改变你的标记。 #trns 应该是一个空的 div，里面什么都没有。你需要把绝对位置加回来
这似乎奏效了，谢谢。文本现在不透明。但是，我在调整背景图像的不透明度时遇到了问题。背景图像位于我想要的 body 元素中。不透明度和过滤器属性在#trns div 中。不透明度设置为 .2，过滤器设置为 alpha(opacity=20)。我不确定过滤器的功能，并且使用这些值似乎不会产生任何变化。我需要背景图像比现在更透明。有什么想法吗？
你需要改变 opacity 的值直到你得到你想要的。 filter 属性（我认为）是 IE 的后备。您现在可以在解决所有问题时将其删除。 [Mozilla(developer.mozilla.org/en-US/docs/Web/CSS/Reference) 有一个很棒的站点来引用 css 属性。您介意将我的答案标记为已接受吗:)
谢谢。由于 background-image 在 body 元素中，而 opacity 在 #trns div 中，我认为这就是 opacity 没有改变的原因。我需要将 body 元素包装在 div 中，但我认为我做不到。我不能玩这个，因为我现在不在家里的电脑上，但是我在将背景图像保留在 body 元素中并让其他一切正常工作时遇到了问题。稍后会尝试。这似乎很容易完成，但事实并非如此。以上是关于页脚在 div 上方折叠，在 body 元素中包含透明背景图像的主要内容，如果未能解决你的问题，请参考以下文章