CSS“封面” - 没有滚动条？答案

【问题标题】：CSS "Cover" - No scroll bars?CSS“封面” - 没有滚动条？
【发布时间】：2012-09-19 03:22:25
【问题描述】：

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

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) 无重复中心中心固定；

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

Here is a Fiddle.

【问题讨论】：

从您的后台规则中删除固定。
@j08691 - 阅读我在代码下方所说的内容，删除 position:fixed; 删除了背景图片
我没有说删除position:fixed，我说从您的后台规则中删除已修复。此外，如果您显示其余代码和/或 jsFiddle，将会很有帮助。顺便说一句，为什么你的身体有一个 z-index？
@j08691 - 抱歉，我看错了。我将在小提琴上工作，至于 z-index，我最初曾尝试将其作为一个 div 包裹整个页面，但将其更改为 body，z-index 被遗留下来，我忘了删除它。（该 div 有与上述相同的问题。）
@j08691 - Here is a fiddle - 你会看到一个黑条出现在图像上。我想避免这种情况。

标签： css

【解决方案1】：

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

您可以尝试删除 position:fixed 以及 top、bottom、height 和 width 属性，并将其添加到您提供的 CSS 上方：

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

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

【讨论】：

【解决方案2】：

我最终更改了背景图像的方法，并使用了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+、Firefox、Chrome、Safari、Opera 并且确实有效的解决方案结束！ =>

【讨论】：

【解决方案3】：

尝试将样式附加到 html，而不是正文...

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

【讨论】：

如果在html中添加意味着背景图片不显示，请验证

【解决方案4】：

只需在背景尺寸中放置 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%;
}

【讨论】：