Question

我在网站上使用背景图像

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

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

问题在于，当我看到页面时这个图像非常大，就像变焦一样，我看不到图像是完全的，我只是它的顶部。

任何想法！

Answer 1

如果您的网页非常高，background-size:cover会使背景图片缩放，以便填充整个body。

如果你只想填充视口，那么你需要在另一个元素中添加（ not 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;
}

Answer 2

使用background-size:100% 100%;

example jsfiddle

值contain和cover维持spec

定义的宽高比

'包含'缩放图像，同时保留其固有的宽高比   （如果有的话），最大尺寸，使其宽度和高度   可以放在背景定位区域内。

'掩盖'缩放   图像，同时保持其内在的纵横比（如果有的话），到   最小尺寸，使其宽度和高度都可以完全   覆盖背景定位区域。

背景封面

2 个答案: