页脚在 div 上方折叠，在 body 元素中包含透明背景图像答案

【问题标题】：footer collapsing above div containing transparent background image in body element页脚在 div 上方折叠，在 body 元素中包含透明背景图像
【发布时间】：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" 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>

【问题讨论】：

请提供完整的代码示例。
我做了，但我想我没有提供足够的东西？我是新来的，所以你能告诉我我遗漏了什么是相关的吗？谢谢。
尝试添加一些html代码。
我添加了更多的 html。这有帮助吗？

标签： html css background

【解决方案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 元素中并让其他一切正常工作时遇到了问题。稍后会尝试。这似乎很容易完成，但事实并非如此。