我的完美背景图
My perfect background image
我目前有这样一个页面:
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
在保持缩放(不拉伸)的同时始终保持最小。这意味着 始终 width: 100vw
或 height: 100vh
,具体取决于屏幕大小。此外,始终 图像将填满屏幕。它将从不 显示任何白色space。图片还必须 始终 显示右上角,图片大小应相应调整。
总而言之,图像将始终:
- 有
width: 100vw
或height: 100vh
- 显示右上角,大小会相应调整。
- 填满屏幕任何屏幕尺寸。完全没有白space.
- 切勿拉伸。始终保持缩放比例。
Background size is your friend. Browser support is 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>
我目前有这样一个页面:
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
在保持缩放(不拉伸)的同时始终保持最小。这意味着 始终 width: 100vw
或 height: 100vh
,具体取决于屏幕大小。此外,始终 图像将填满屏幕。它将从不 显示任何白色space。图片还必须 始终 显示右上角,图片大小应相应调整。
总而言之,图像将始终:
- 有
width: 100vw
或height: 100vh
- 显示右上角,大小会相应调整。
- 填满屏幕任何屏幕尺寸。完全没有白space.
- 切勿拉伸。始终保持缩放比例。
Background size is your friend. Browser support is 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>