Question

您能告诉我如何使背景图像适应显示器的尺寸吗？这就是我得到的：

body {
background: url(../images/bg.jpg) #eee fixed no-repeat center;
-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
font: 12px Tahoma, sans-serif;

}

即使我在一台显示器上获得垂直滚动条而在另一台显示器上没有滚动条。

谢谢！

Answer 1

固定且居中的背景

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;

适用于：

Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

Answer 2

我找到了导致滚动条出现的原因。它是reset.css文件，包含代码：

html {
height: 101%;}

即使在短页面上也会强制滚动条。知道为什么它可能有用吗？

固定背景调整为显示器尺寸

2 个答案: