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不透明度修正 - 使透明容器拉伸高度的頁面（和隱藏部分）

回答

相關問題