Question

CSS挑战：

这个CSS让我的背景填充100％的屏幕高度，但是有一个小问题 - 当你向下滚动时，最初是空白区域，然后当你松开手指并停止滚动背景图像时＃34;调整＆＃34;并再次填充屏幕高度的100％。如果您是第一次继续滚动，则问题不会在同一页面上重新出现。

<body>
  <div class="background"></div>
  <div class="content"></div>
</body>

和CSS：

html{
     height:100%;
    }
.background{
     position: fixed;
     z-index: 0;
     width: 100%;
     height: 100%;
     background-image: url('../image/backgroundpicture.jpg');
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     background-position: 50% 10%; 
    }
.content{
     width:100%;
     height:200px;
     position:relative;
     z-index:1;
     top:1800px;
     }

当我把背景图像放在Body中时，问题就出现了！

Answer 1

可能是错的，这个问题有点不清楚。默认情况下，将有一个空格，可以使用CSS重置中的此片段删除。这有帮助吗？

CSS

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}

您希望背景位于所有内容之下吗？如果是这样，你应该将它应用到身体上。

CSS

body{
     background: url('http://www.placehold.it/500') fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
    }

修改 - 创建一个与此完全相同的HTML页面，是否存在同样的问题？

<!DOCTYPE html>
<html>
<head>


<style type="text/css">

html, body, body div {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family: Helvetica;
}    

#background {
         background: url('http://www.placehold.it/500') fixed;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
        }

</style>

</head>

<body>

<div id="background">

<!-- Fill me with content -->

</div>


</body>

</html>

Answer 2

希望有一天有人可以为改变高度的观点找到一个可靠的工作......

我尝试了很多不同的想法，但仍然找不到一个效果很好的想法。

我找到的最好的是阅读（窗口）.height（）并添加60px以考虑标题栏，并将包含背景的元素调整为该高度..

它仍然不是最好的，因为60px不会总是点亮，你只是将背景扩展到较小的视点大小..

如果只有一种方法可以获得最大视点大小，那么这将解决所有问题：（

Answer 3

这是（最终）解决方案，原因是Chrome for Android和iOS Safari的工作方式发生了变化！必须使用100vh作为高度，它将完全按预期运行。

https://developers.google.com/web/updates/2016/12/url-bar-resizing

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url('../image/backgroundpicture.jpg');
    background-size: cover;
    z-index: -1;
}

应该是您所需要的！

Answer 4

body {
    padding : 0;
    margin : 0;
}

这必须有效。

请查看backstretch.js，无论我们在移动设备还是台式机上打开网站，都能保持图像响应。

CSS挑战：背景 - 高度为100％的图像 - 滚动移动时的空白区域

4 个答案: