我完美的背景图片

时间:2015-07-23 18:52:42

标签: html css image image-scaling autosize

我目前有这样一个页面:



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;
&#13;
&#13;

但我需要background-image始终是最小的,同时保持缩放(无拉伸)。这意味着 AT ALL TIMES width: 100vwheight: 100vh,具体取决于屏幕尺寸。此外 AT ALL TIMES 图像将填满屏幕。它将从不显示任何空白区域。图像也必须始终显示右上角,图像大小应相对于此调整。

总而言之,图像将永远:

  1. 拥有width: 100vwheight: 100vh
  2. 显示右上角,尺寸将相对于此调整。
  3. 在屏幕上填写以获取任何屏幕尺寸。没有空格根本
  4. 永不伸展。始终保持缩放。

1 个答案:

答案 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>