Question

我想创建一个完美的完整背景图像，它是静态的，并且无论屏幕（视口）的大小是什么，它都会填充视口。

所以我使用以下CSS：

body, html{
   width: 100%;
   height: 100%;
   background: url('http://ns223506.ovh.net/rozne/d4857d4e0f68027e7af6b70d5488b7e6/wallpaper-751328.jpg') no-repeat center center fixed;
   margin: 0;
   padding: 0;
   -webkit-background-size: cover;
      -moz-background-size: cover;
        -o-background-size: cover;
           background-size: cover;
}

现在的问题是......据我了解，当视口大小超过图像大小时，图像会拉伸并会像素化...

如何阻止传递最大尺寸？

此外，当您想要满足视网膜显示分辨率时，解决此屏幕尺寸问题的最佳方法是什么？在body，html元素上设置最大宽度？

谢谢

Answer 1

您可以使用@media查询来决定您想要图像覆盖整个页面的分辨率，如果分辨率变大，要么将其替换为其他图像，要么只使用center值background position和background color，如果您不想在某些分辨率后覆盖图像，这将阻止图像获取像素。例如

Demo（调整小提示窗口以获得所需效果）

html, body {
    height: 100%;
    width: 100%;
}

body {
    background-image: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-frc1/p480x480/1231_381212385330183_1145397211_n.jpg');  
    /* If it exceeds 699px width, you can also replace the image here... */
    -webkit-background-size: cover;
      -moz-background-size: cover;
        -o-background-size: cover;
           background-size: cover;
}

@media all and (max-width: 699px) {
  body {
        background-color: #000;
        background-image: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-frc1/p480x480/1231_381212385330183_1145397211_n.jpg');
        background-size: 200px 200px;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

注意：我在此示例中使用了@media all and (max-width: 699px)和background-size: 200px 200px 仅用于演示目的，您可以将其替换为原始版本图像的高度/宽度以及@media规则
的所需分辨率

CSS：静态背景图像，可覆盖任何屏幕尺寸但不超过图像尺寸

1 个答案: