我目前有这样一个页面:
body {
background-image: url("http://placehold.it/1920x1200");
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
<title>Cool Background Man</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
</body>
</html>但我需要 background-image 在保持缩放(不拉伸(stretch))的同时始终保持最小。这意味着始终 width: 100vw 或height: 100vh，具体取决于屏幕尺寸。此外，始终图像将填满屏幕。它从不显示任何空白。图片还必须始终显示右上角，图片大小应相应调整。
总而言之，图像将始终:
- 有
width: 100vw或height: 100vh - 显示右上角，尺寸会随之调整。
- 填充屏幕任何屏幕尺寸。没有空格完全。
- 切勿拉伸(stretch)。始终保持缩放比例。
最佳答案
Background size是你的 friend 。浏览器支持是 very good at 95% according to caniuse.com
正文{ 背景图像:url(“http://placehold.it/1920x1200”)； 最小高度:100vh； 最小宽度:100vw； 溢出:隐藏；
body {
background-image: url("http://placehold.it/1920x1200");
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
background-size: cover;
background-position: top right;
}<!DOCTYPE html>
<html>
<head>
<title>Cool Background Man</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
</body>
</html>更新:一种允许您使用 CSS 过滤器的方法是将背景图像应用于伪内容并对其应用过滤器:
body {
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
position: relative;
}
body:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url("http://placehold.it/1920x1200");
background-size: cover;
background-position: top right;
-webkit-filter: blur(5px); /* Or whatever filter you want */
z-index: -1; /* Ensures it's behind the rest of the content */
}<!DOCTYPE html>
<html>
<head>
<title>Cool Background Man</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
Some content
</body>
</html>关于html - 我的完美背景图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31595802/