我的完美背景图片答案

【问题标题】：My perfect background image我的完美背景图片
【发布时间】：2015-07-23 18:52:42
【问题描述】：

我目前有一个这样的页面：

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，具体取决于屏幕尺寸。此外，始终图像将填满屏幕。它将从不显示任何空白。图片还必须始终显示右上角，图片大小应相对于右上角进行调整。

总而言之，图像将始终：

有width: 100vw 或height: 100vh
显示右上角，大小会相应调整。
填充屏幕适用于任何屏幕尺寸。 根本没有空格。
切勿拉伸。始终保留缩放比例。

【问题讨论】：

也许是一些 JavaScript？
确保您的图片是 .svg

标签： html css image image-scaling autosize

【解决方案1】：

Background size 是你的朋友。浏览器支持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>

【讨论】：

你将如何只使用img 而不是整个身体来做到这一点，因为我需要对图像应用过滤器，而你不能为背景图像这样做（我认为）跨度>