3

我正在尝试在我的 html 正文中设置背景图像。当窗口大小为1280px时，此时背景图片设置为全身，如果窗口大小低于800px；宽度没有问题，但高度逐渐减小，但我想设置背景图像宽度和高度设置为全屏，当窗口调整大小时。

   body
{
 background: url(images/back.jpg) no-repeat; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;   
}
4

2 回答 2

2

'background-size:cover' 属性有很多优点，你就快到了。

以下应该为您解决问题，您可以在
http://jsfiddle.net/panchroma/gXGcD/上看到它的实际效果

您会看到，我还强制 body 和 html 元素的高度为 100%，并且还使背景图像的位置居中。

IE9 支持 background-size，对于 IE8 的支持，有一个 polyfill @ https://github.com/louisremi/background-size-polyfill

祝你好运！

body
{
background: url(https://dl.dropboxusercontent.com/u/2665617/bootstrap/images/image1.jpg) no-repeat; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;   
background-position: 50% 50%;
height:100%;
}

html{
height:100%;
}
于 2013-05-25T10:35:08.103 回答
0

如果您不介意图像失真，可以使用以下方法：

background-size: 100% 100%;
于 2013-05-25T10:04:57.137 回答