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

我正在使用CSS修复来确保不透明不影响内部元素，并且我遇到了问题。该图片只能延伸至可见的页面的100％。然而，我的页面很高，其中一半隐藏，只能通过向下滚动访问。一旦你向下滚动，图像容器结束，我只得到一个固体填充颜色。这可以修复，也许CSS或jQuery？CSS不透明度修正 - 使透明容器拉伸高度的页面（和隐藏部分）

实施例： enter image description here

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%; 
}

来源

2012-03-07 tctc91

为什么不把CSS添加到您的身体 - 将这项工作？ – 2012-03-07 12:05:49

最简单的是将其改为位置是：固定;那么你的背景将不会滚动

如果你想要你的背景滚动，那么你可以使用JavaScript（或JavaScript库）来获取你的内容的高度，并动态设置背景的高度。

的jQuery：

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

来源

2012-03-07 11:49:54 Evert

这实际上效果很好。背景不滚动会出现什么样的复杂情况？在我看来，这看起来绝对没问题。 – tctc91 2012-03-07 11:53:11

据我所知，没有任何复杂情况，只是它在内容移过顶端时保持静止 – Evert 2012-03-07 11:54:25

我的位置是：fixed;现在由于简单性而采取的方法。谢谢 – tctc91 2012-03-07 12:06:59

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

回答

相关问题