我完美的背景图像

我现在有一个这样的页面:

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
显示右上角，大小会相应调整
填充屏幕对于任何屏幕尺寸。没有空白。
从不伸展。始终保持缩放

背景大小是你的朋友。根据caniuse.com

，浏览器支持非常好，达到95%

身体{背景图片:url("http://placehold.it/1920x1200");最小高度:100 vh;min-width: 100大众;溢出:隐藏;}

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>

UPDATE:使用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>

相关内容

最新更新

热门标签：