加载适当大小的全屏背景图片。

Question

我需要创建一个全屏背景。因此，这个方法可以实现：

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

我想加载一张很大的背景图片（大约2000像素宽），但我认为这种解决方案不太好，因为移动设备也会加载这张大图。

我尝试根据屏幕大小来加载图片：

jQuery(document).ready(function($) {    
    var win = $(window);

    win.resize(function() {

        var win_w = win.width(),
            win_h = win.height(),
            $bg    = $("#bg");

        // Load narrowest background image based on 
        // viewport width, but never load anything narrower 
        // that what's already loaded if anything.
        var available = [
            1024, 1280, 1366,
            1400, 1680, 1920,
            2560, 3840, 4860
        ];

        var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : null;

        if (!current || ((current < win_w) && (current < available[available.length - 1]))) {
            var chosen = available[available.length - 1];
            for (var i=0; i<available.length; i++) {
                if (available[i] >= win_w) {
                    chosen = available[i];
                    break;
                }
            }
            // Set the new image
            $bg.attr('src', '/images/bg/' + chosen + '.jpg');
        }

        // Determine whether width or height should be 100%
        if ((win_w / win_h) < ($bg.width() / $bg.height())) {
            $bg.css({height: '100%', width: 'auto'});
        } else {
            $bg.css({width: '100%', height: 'auto'});
        }
    }).resize();
});

所以我需要一个像这样的图像元素：

<img id="bg" src="" style="position: fixed; left: 0; top: 0" />

但这并不是真正的背景（就像第一个解决方案）。是否可能将jquery脚本调整为html背景url？或者有没有更简单的解决方案？

我还想先加载图片，然后再淡入网站......我想我需要jQuery的.load（）函数；但我不知道如何将其放入脚本中......

- user3142695

---

你尝试使用CSS媒体查询了吗？https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries - Kyle

啊..该死。当然。那是最简单的方法。 - user3142695

Answer 1

使用响应式设计，即纯CSS解决方案：

body {
    background-image: url("lg_image.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

@media (max-width: 767px) {
  body {
      background-image: url("xs_image.png");
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  body {
      background-image: url("sm_image.png");
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  body {
      background-image: url("lg_image.png");
  }
}

@media (min-width: 1201px) {
  body {
      background-image: url("xl_image.png");
  }
}

不支持CSS3的浏览器将会显示lg_image.png，因此有一个优雅的降级。

- Yoni Baciu

Answer 2

这是一个更加实用的带有过滤器的媒体查询

@media screen and (max-width:1024px){

    img { 
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.largeImage.png', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='largeImage.png', sizingMethod='scale')";
          background: url(images/largerImage.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
    }
}

@media screen and (max-width:1140px){

    img { 
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.largerImage.png', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='largerImage.png', sizingMethod='scale')";
          background: url(images/largerImage.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
    }
}

您可以在这里找到相关参考资料http://css-tricks.com/perfect-full-page-background-image/

- Jesse

Answer 3

我用JavaScript做了类似的事情，但不是根据屏幕大小加载，而是每次刷新页面都会加载一个随机图像作为背景。

你不需要使用<img>标签或更改其属性。你可以使用jQuery来更改body标签上的CSS样式以加载不同的设置，或者如果你想摆脱内联样式标签（你应该这样做），就像我一样，可以为每个背景创建一个类，并将该类应用于body以通过jQuery更改背景。

- Mark

Answer 4

您可以使用类似以下代码的方式：

$(document).ready(function(){

    var sWidth = screen.availWidth;
    var sHeight = screen.availHeight;

    if(sWidth > 1024){

        $("img").attr("src", "largeImage.png");

    } else if(sWidth > 1140){

        $("img").attr("src", "largerImage.png");

    }
    //and so on

})

或者您可以使用CSS3媒体查询，

<style>
    @media screen and (max-width:1024px){

        img { background-image:url(largImage.png); }

    }

    @media screen and (max-width:1140px){

        img { background-image:url(largerImage.png); }

    }
</style>

如果您需要支持IE8，请使用respond.js。它可以解决IE8不支持CSS3媒体查询的问题。请确保在加载CSS后放置脚本标签。

- Jesse

---

请记住，IE8也不支持background-size: cover，因此媒体查询在这里也无法帮助。 ;) - S.B.

我没有想到那个。我不太担心它，因为全球统计数据显示IE8的使用率约为10％，随着XP不再受支持且容易受到攻击，这一比例会下降。http://windows.microsoft.com/en-us/windows/end-support-help。但您也可以使用IE8过滤器来实现缩放。 - Jesse

在我看来，在这种情况下使用JavaScript会使事情变得更加复杂。CSS3媒体查询将在调整大小时触发。而且，JavaScript的调整大小事件只有在释放时才会触发，并且不会随着窗口的调整而更新。CSS3媒体查询在达到断点时触发。如果您想要在调整大小时进行更新，您需要在脚本中使用类似于setInterval的东西来监视当前屏幕宽度，并根据此更新图像。 - Jesse