3

我的背景图片大小为 1620*1080，屏幕分辨率为 1366*768。它怎么可能不覆盖我屏幕的大约 15%（右侧部分）？

这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { 
    min-height: 100%;
    min-width: 100%;
    background-image:url(background.png);
    background-repeat: no-repeat;
}

div#container {
    margin: 0 auto;
    background-color: red;

}
</style>
</head>
<div id="container">

</div>
<body>
</body>
</html>

如您所见，我已添加

min-height: 100%;
min-width: 100%;

想也许这会有所帮助。并且background-repeat: no-repeat;只是因为它不覆盖屏幕而存在。

有任何想法吗？谢谢！

4

2 回答 2

8

试试这个：

body { 
    background: url(background.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

无论窗口比您的图像大还是小，这都会为您提供全尺寸的背景图像。

如果这不起作用，请阅读这篇 css-tricks 帖子的其余部分。

于 2012-11-13T19:32:33.630 回答
4

你的图像比例是1620/1080=1.5,，屏幕分辨率是1366/768=1.77。本质上，正在发生的事情是图像以较小的尺寸显示，同时保持按比例缩放。右侧区域被封锁。

尝试只发布尺寸

background-size:100% 100%;
于 2012-11-13T19:34:48.600 回答