0

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

所以我使用以下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 元素上设置最大宽度？

谢谢你

4

1 回答 1

1

您可以使用@media查询来决定您希望图像覆盖整个页面的分辨率，如果分辨率变大，则将其替换为另一个图像，或者如果您不想在之后覆盖图像，则只需使用center值background position和 abackground color一定的分辨率，这将防止图像像素化.. 例如

演示（调整小提琴窗口的大小以获得所需的效果）

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规则所需的分辨率

于 2013-05-31T11:44:29.560 回答