0

我正在为我的网站使用类似背景的图像

我把它用图像覆盖了所有页面

body.questionary{
    background: url("../img/ques.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我的图像是 jpg 尺寸为 703x883，大小为 258KB

问题是当我看到这个图像非常大的页面时，就像一个缩放，我没有看到完整的图像，我只看到它的顶部。

任何想法！

4

2 回答 2

3

如果您的页面非常高，background-size:cover则会使背景图像按比例缩放以填充整个body.

如果您希望它仅填充视口，那么您将需要在另一个元素（而不是 body）中添加并设置它的样式

<body>
   <div id="background"></div>
...
</body>

和

#background{
   position:fixed;
   z-index:0;
   top:0;
   right:0;
   bottom:0;
   left:0;
   background: url("../img/ques.jpg") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
于 2012-12-21T01:00:35.413 回答
0

利用background-size:100% 100%;

示例 jsfiddle

值contain并保持规范cover定义的纵横比

'contain' 缩放图像，同时保留其固有纵横比（如果有），使其宽度和高度都可以放在背景定位区域内。

'cover' 缩放图像，同时保留其固有纵横比（如果有），使其宽度和高度都可以完全覆盖背景定位区域。

于 2012-12-21T01:40:54.763 回答