我有一张尺寸为 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; 只是因为它没有覆盖屏幕。
有什么想法吗？谢谢!
最佳答案
试试这个:
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 的其余部分.
关于html - 背景图片没有覆盖整个屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13367403/