完美的背景适合动态页面高度（移动）- CSS

Question

我正在做一个小项目（一个可以在 PC、平板电脑或智能手机上使用的伪 Web 应用程序）。

我基本上已经完成了我的想象所暗示的一切，期待一件事：背景。我想要实现的结果是 'fit' 整个屏幕的背景（这是一张海滩照片，而不是图案），具体取决于看到它的设备。

这不是问题（我见过一些很酷的技术）但是...

网站可以垂直滚动：在页面加载时一切正常，但是当我向页面添加更多内容时 (AJAX)，网站向页面添加更多内容和 'INCREASE' 页面高度.

所以我在 'reload' 页上看到的每一个 CSS 礼节（比如 background-size: cover），都会对背景产生非常烦人的效果，那就是 'reloaded' 有了新的页面高度，很难看。在 PC 上基本上没问题，但在移动设备上（Every），这也会破坏布局。

另一种方法是将我的背景固定在页面顶部；没关系，直到我滚动到足以到达图片的末尾。

有什么方法可以达到可靠的效果吗？

Answer 1

制作你的 div position:fixed 并赋予它完整的宽度。试试这个代码快照。应该对你有帮助。

#background{
    background-color:red;
    position:absolute;
    height:100%;
    width:100%;
    overflow:scroll;
}

html { 
  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<div id="background">
  Test
</div>

Answer 2

试试这个：

您可以将这些样式添加到 div 或其他任何内容。出于演示目的，我使用了 <body>。如果您不希望图像随页面滚动，请将 background-attachment: scroll; 更改为 background-attachment: fixed;

编辑：

我继续添加 background-size: 100% 100%; 以便整个图像正确显示。

body{
background-image: url("http://webneel.com/wallpaper/sites/default/files/images/08-2013/6-starfish-seashells-beach-sand-wallpaper.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll;
}

<!DOCTYPE html>
<html>
<body>
  
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  
</body>
</html>

希望对您有所帮助！

完美的背景适合动态页面高度（移动）- CSS

Perfect background fit with dynamic page height (Mobile)- CSS

html

css

mobile

background