我正在创建一个网站，其中我需要一个整页响应式背景图像以在所有设备上显示。我在 Photoshop 中创建了这张图片，它是 2560 x 1440 (16:9)。
我在图像的顶部、底部、左侧和右侧添加了白色边框，与紫色背景形成鲜明对比，以便更容易看到发生了什么。
由于某些原因，在使用下面的代码时，图像的顶部和底部(白色边框)被切掉了。
当我使用 inspect element 并将视口(viewport)设置为 1920 x 1080 等时，这个问题就消失了...
我的显示器设置为 1920 x 1080 分辨率，我使用的是 Opera 浏览器，不过也在 IE 中测试过。
这是正在发生的事情的图像 - https://gyazo.com/fb5d44dfd5332e42f1406e1f427dbd4a
顶部和底部应该有等宽的白色边框，但由于某些原因没有。
感谢任何帮助。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/styles.css">
<title>Hello, world!</title>
</head>
<body>
</body>
</html>
html {
background: url(../media/placeholder.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
最佳答案
这是因为您正在使用 background-size: cover 它正在做它应该做的事情。它会 100%“覆盖”该元素，无论它如何调整大小，它周围都不会留下“空白”空间，并且它可能会切断一切。
尝试使用 background-size: contain 代替，这可能是您正在寻找的更多内容。图像的 100% 始终可见，但周围可能会留有一些空白。
这是每个 background-size 选项及其外观的一个很好的演示
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
仅供引用，您不需要包含不同的供应商前缀(-o-*、-moz-* 和 -webkit-*) 对于此功能，it's pretty well supported (当然除非你需要支持IE8、Firefox 3等)
关于html - 整页背景图像切断顶部和底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55937327/