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;
}

所以我会加载一个大的背景图像（大约2000px宽度），但我认为这个解决方案非常糟糕，因为移动转移也会加载这个大图像。

我尝试加载附加到屏幕尺寸的图像：

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-background-url？或者有人知道更简单的解决方案吗？

我还想先加载图像（！）然后将网站淡入...我想我需要.load（） - jQuery的功能;但我不知道怎么把它放在剧本里......

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，因此可以优雅地降级。

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/

Answer 3

我使用Javascript执行类似的操作，但不是根据屏幕大小加载，而是每次刷新页面时都会在后台加载一个随机图像。

您不需要标记，也不需要更改它的标记。您可以使用jQuery更改body标签上的CSS样式以加载不同的设置，或者如果您想要像我一样摆脱内联样式标记（并且您应该），您可以简单地为每个背景创建一个类并应用通过jQuery更改背景的主体类。

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后为其添加脚本标记。

加载适当大小的整页背景图像

4 个答案: