Question

我正在开展一个小项目（一个可以在PC，平板电脑或智能手机上使用的伪网络应用程序）。

我基本上完成了我的想象力建议的一切，期待一件事：背景。结果我想要实现它的背景（它是一张海滩照片，而不是一种模式），这将是适合的。整个屏幕，取决于它所见的设备。

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

网站可以垂直滚动：在页面加载一切都很顺利但是当我向页面添加更多内容（AJAX）时，网站会向页面添加更多内容并且“增加”＃39;页面高度。

因此，我在页面上重新加载的所有CSS优先级（例如background-size: cover）都会对背景做出非常明显的影响，并且会在背景上产生非常明显的影响。\ n＆＃39>＆＃39;重新加载＆＃39;新的页面高度，看起来非常难看。在PC上它基本上没问题，但在移动设备上（每个），这也是一个可怕的布局。

另一种方法是将我的背景修复到页面顶部;没关系，直到我滚动到达图片的末尾。

任何可以达到可靠效果的方法吗？

Answer 1

试试这个：

您可以将这些样式添加到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> 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? 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? 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? </body> </html>

我希望这有帮助！

Answer 2

使你的div位置：固定并给它全宽。试试这段代码。它应该对你有所帮助。

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

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

2 个答案: