Question

我知道如何设置页面背景;

body{
  background-color: blue;
  background-image: url(imagename.ext);
  background-repeat: no-repeat;
  background-position: left;
}

该页面可以缩放。使用浏览器，用户可以放大和缩小。但背景图像可能无法放大或缩小。它可以保持原样，默认大小。这可能吗？

Answer 1

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

Answer 2

您可以使用css：

background-size: cover;

教程：http://css-tricks.com/perfect-full-page-background-image/

Answer 3

与问题无关，但可能对某人有所帮助。我将使用像http://srobbin.com/jquery-plugins/backstretch/这样的jquery插件。

我总是通过css获得完整页面静态背景（如Anup Jangid的答案）的速度问题。它使页面的滚动非常缓慢和笨拙。

Answer 4

我不认为有一种原生的清洁方式来实现你所要求的。此方法应该可以工作，但是在浏览器缩放后调整大小时，您可能会得到一些（可能是可接受的）闪烁。

指定background-size：widthpx heightpx，当浏览器缩放时，您需要检测缩放比例（请参阅How to detect page zoom level in all modern browsers?）并相应地设置背景图像的宽度px和高度px。

如何保持页面背景图像缩放固定？ CSS

4 个答案: