CSS「封面」 - 沒有滾動條？

我正在使用cover屬性來創建填充背景並使用瀏覽器調整大小的背景圖像。但是我遇到了一個問題，頁面有很多內容，並且沒有滾動條出現讓我向下滾動！這裏是我使用的代碼：CSS「封面」 - 沒有滾動條？

body{ 
    background: url(path.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    /* Cover for IE 7/8 */ 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path.jpg', sizingMethod='scale'); 
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path.jpg', sizingMethod='scale'); 
    /* End Cover for IE 7/8 */ 
    background-size: cover; 
    background-color: transparent !important; 
    position:fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height:100%; 
    max-width:2500px; 
    max-height:1500px; 
    z-index:1; 
}

如果我刪除position:fixed;我得到的滾動條，但後面的背景圖像消失。解決這個問題的最好方法是什麼，同時有滾動條和背景封面圖片？

注：（雖然我更喜歡CSS只能回答）我使用jQuery的，如果它的工作原理，就可以使用JS回答

UPDATE

我刪除fixed來自：

background：url（path.jpg）no-repeat center center fixed;

並且再次顯示滾動條，但是當我滾動圖像時，滾動條會覆蓋黑色背景。我希望圖像保持不變並顯示滾動條。

Here is a Fiddle.

來源

2012-09-19 L84

從您的背景規則中刪除固定。 – j08691

@ j08691 - 閱讀下面的代碼，刪除'位置：固定;'刪除背景圖片 – L84

我沒有說刪除'位置：固定'，我說刪除固定從您的背景規則。此外，如果您顯示了其他代碼和/或jsFiddle，這將會很有幫助。順便說一句，你的身體爲什麼有Z指數？ – j08691

我最終改變了我的背景圖像方法，並使用找到的方法here。

這裏是代碼：

html, body { 
height: 100%; 
width: 100%; 
padding: 0; 
margin: 0; 
} 

#full-screen-background-image { 
z-index: -999; 
min-height: 100%; 
min-width: 1024px; 
width: 100%; 
height: auto; 
position: fixed; 
top: 0; 
left: 0; 
} 

#wrapper { 
position: relative; 
width: 800px; 
min-height: 400px; 
margin: 100px auto; 
color: #333; 
} 

<body> 
    <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" /> 
    <div id="wrapper"> 
     <p>Content goes here...</p> 
    </div> 
</body>

，我發現我的背景被顯示在圖像上，所以我說這個類機體：

.transparent{ 
background-color: transparent !important; 
}

所出現是我的背景是另外一個問題黑色，在圖像加載之前顯示透明背景色白色。爲了解決這個問題，我創建了一個加載div，並加載了頁面，然後將該類添加到主體中。

代碼：

HTML

<body> 
    <div id="loading"> 
    <h2 class="textcenter">Loading...</h2> 
    <img id="loading-image" class="center" src="ajax-loader.gif" /> 
</div> 
<div style="display:none;" id="content-wrap"> 
    <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" /> 
    <div id="wrapper"> 
     <p>Content goes here...</p> 
    </div> 
</div> 
</body>

$(window).load(function() { 
    $('#loading').fadeOut('slow', function() { 
    $("#content-wrap").fadeIn("slow", function() { 
     $("body").addClass("transparent"); 
    });  
}); 
});

我們最終與我測試IE 8+的解決方案，火狐，Chrome， Safari，Oper一個和實際工作！ =>

來源

2012-09-19 06:32:15 L84

根據您的網頁上，身體可能不會依賴於HTML/CSS的休息調整到100％的寬度/高度。你有浮動/絕對定位的元素？

你可以嘗試刪除position:fixed還有top，bottom，height和width屬性，並加入這個你給CSS上面：

html, body { 
    min-height: 100%; 
    min-width: 100%; 
    max-width: 2500px; 
    max-height: 1500px; 
}

這將是有益的，看看你的佈局的HTML片段/ CSS，因爲這可能會影響身體。

來源

2012-09-19 03:36:31

嘗試添加樣式HTML，不是身體......

html{ 
    background: url(path.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
}

來源

2012-09-19 06:46:44

如果在html中添加的意思是不顯示背景圖片，則請驗證 –

閱讀本文http://css-tricks.com/perfect-full-page-background-image/ –

只是把100％，而不是蓋在背景尺寸加入高度：在覆蓋然後背景圖片應該100％有任何大小的內容。

body{ 
    background: url(path.jpg) no-repeat center center fixed; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    /* Cover for IE 7/8 */ 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path.jpg', sizingMethod='scale'); 
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path.jpg', sizingMethod='scale'); 
    /* End Cover for IE 7/8 */ 
    background-size: 100%; 
    background-color: transparent !important; 
    position:fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height:100%; 
    max-width:2500px; 
    max-height:1500px; 
    z-index:1; 
} 
.overlay{ 
    background: rgb(0, 0, 0); /*Fallback */ 
    background: rgba(0, 0, 0, 0.5); 
    padding: 5px 5px; 
    position:relative;height:100%; 
}

來源

2012-09-19 07:27:22

CSS「封面」 - 沒有滾動條？

回答

相關問題