我正在使用 CSS 修复程序来确保不透明度不会影响内部元素，但我遇到了问题。图片只会拉伸(stretch)到 visible 页面的 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%;
}
最佳答案
最简单的方法是将其更改为 position:fixed;那么你的背景根本不会滚动
如果您确实希望背景滚动，则可以使用 javascript(或 javascript 库)获取内容的高度并动态设置背景的高度。
j查询:
$("div.bgImg").height($("div.type-home").height());
关于jquery - CSS 不透明度修复 - 使页面(和隐藏部分)的透明容器拉伸(stretch)高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9600900/