CSS不透明度修复 - 使透明容器拉伸页面（和隐藏部分）的高度答案

【问题标题】：CSS Opacity fix - Make transparent container stretch height of page (and hidden parts)CSS不透明度修复 - 使透明容器拉伸页面（和隐藏部分）的高度
【发布时间】：2012-03-07 20:03:22
【问题描述】：

我正在使用 CSS 修复程序来确保不透明度不会影响内部元素，但我遇到了问题。图片只会拉伸到可见页面的 100%。我的页面相当高，但是有一半是隐藏的，只能通过向下滚动才能访问。但是，一旦向下滚动，图像容器就会结束，我只会得到纯色填充颜色。这可以修复，也许是 CSS 或 jQuery？

示例：

HTML：

<body><!-- Bg Color -->
    <div class="bgImg"></div><!-- Bg Image Container -->
    <div data-role="page" class="type-home" data-theme="a">



    </div>
</body>

CSS：

body { background-color: red; }

.bgImg {
    background-image: url(../images/patterns/pattern9.png);
    opacity: 0.8;
    filter: alpha(opacity=0.8;);
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    -webkit-opacity: 0.8;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

【问题讨论】：

为什么不将 css 添加到你的身体 - 这行得通吗？

标签： jquery html css jquery-mobile opacity

【解决方案1】：

最简单的方法是将其更改为 position:fixed;那么你的背景就不会滚动了

如果您确实希望背景滚动，那么您可以使用 javascript（或 javascript 库）来获取内容的高度并动态设置背景的高度。

jquery:

$("div.bgImg").height($("div.type-home").height());

【讨论】：

实际上效果很好。背景不滚动会出现什么并发症？我这边看起来绝对没问题。
据我所知没有并发症，除了它在内容移动到顶部时保持静止
我选择了这个位置：固定；由于简单，现在的方法。谢谢