0

我正在使用 cover 属性创建一个背景图像，该图像填充背景并使用浏览器调整大小。但是我遇到了一个问题，页面有很多内容并且没有滚动条出现让我向下滚动！这是我正在使用的代码：

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;，我会恢复滚动条，但背景图像会消失。解决此问题并同时拥有滚动条和背景封面图像的最佳方法是什么？

注意：我使用的是 jQuery，如果可行，我会使用 JS 答案（尽管我更喜欢仅 CSS 的答案。）

更新

我fixed从：

背景：url（path.jpg）无重复中心中心固定；

并且再次显示滚动条，但是当我滚动时，图像在滚动时被黑色背景覆盖。我希望图像保持固定并显示滚动条。

这是一个小提琴。

4

4 回答 4

0

根据您的页面，主体可能无法调整为 100% 宽度/高度，具体取决于 HTML/CSS 的其余部分。你有浮动/绝对定位的元素吗？

您可以尝试删除position:fixed、和属性，并将其添加到您提供的 CSStop之上：bottomheightwidth

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

查看布局 HTML/CSS 的片段会很有帮助，因为这可能会影响正文。

于 2012-09-19T03:36:31.940 回答
0

我最终更改了背景图像的方法并使用了此处找到的方法。

这是代码：

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>

JS

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

我们以我测试了 IE 8+、Firefox、Chrome、Safari、Opera 的解决方案结束，并且确实有效！=>

于 2012-09-19T06:32:15.250 回答
0

尝试将样式附加到 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-19T06:46:44.397 回答
0

只需在背景尺寸中添加100% 而不是覆盖，在叠加层中添加 height: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-19T07:27:22.313 回答