我目前有这样一个页面:
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>
&#13;
但我需要background-image
始终是最小的,同时保持缩放(无拉伸)。这意味着 AT ALL TIMES width: 100vw
或height: 100vh
,具体取决于屏幕尺寸。此外 AT ALL TIMES 图像将填满屏幕。它将从不显示任何空白区域。图像也必须始终显示右上角,图像大小应相对于此调整。
总而言之,图像将永远:
width: 100vw
或height: 100vh
答案 0 :(得分:1)
Background size是你的朋友。浏览器支持为very good at 95% according to caniuse.com
body { background-image: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>