Question

我的背景图片大小为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;仅在那里，因为它不会覆盖屏幕。

有什么想法吗？谢谢！

Answer 1

试试这个：

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;
}

无论窗口是大于还是小于图像，都可以为您提供全尺寸背景图像。

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

Answer 2

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

尝试发布尺寸

background-size:100% 100%;

背景图像不会覆盖整个屏幕

2 个答案: