Question

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

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.

Answer 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的片段会有所帮助，因为这可能会影响正文。

Answer 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>

JS

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

我们以一种解决方案结束，我测试了IE 8 +，Firefox，Chrome，Safari，Opera，实际上是有效的！ =＆GT;

Answer 3

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

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

Answer 4

在背景大小中添加 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%;
}

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

4 个答案: