Question

让我们说我的身体标签有背景图像，分辨率为1920 x 1020.当我加载页面时，我的窗口大小只有800 x 800.我不知道想要加载1920 x 1020分辨率，只有800 x 800我需要显示背景图像。

有任何方法可以达到这个目的吗？

<div class="give_me_background_plx">

</div>

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

.give_me_background_plx {
  background: url("http://placehold.it/1920x1000") center center, 100% 100%; 
  height:100%;
  width:100%;
}

编辑：看到jsfiddle。当我打开该页面时，我不想加载要加载的完整图像，而是一个与窗口大小完全相同的较小版本。就像在img-tag中一样，我想为该图像设置高度/宽度，这些应该是我的窗口大小。

Answer 1

所以你想加载一个关于视口的不同图像？使用CSS媒体查询：

body {
    background: url(image-1920.png);
}

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

Answer 2

body标签的css应为100％（宽度：100％），否则您可以使用 background-size 属性在背景中设置图片的大小。

Answer 3

不幸的是，这是你只能通过Javascript完成的事情（我个人更喜欢jQuery）。

因为你只想加载一个图像而不只要窗口变大就会加载到另一个图像中（正如Roy的回答一样）。

jQuery类似于：

$(document).ready(function() {
    if ($(window).width() <= 800) { // if the width is equal to, or smaller than 800 px.
        $("body").css("background","url(image-800.jpg) no-repeat"); // load the small image 
    } else { // if the width is bigger than 800 px
        $("body").css("background","url(image-1920.jpg) no-repeat"); // load the bigger image.
    }
});

JSFiddle demo with your gravatar

注意：要测试演示，您必须加载宽度较小的页面，然后重新加载宽度大于800px的页面。

背景 - 图像应该是窗口的分辨率

3 个答案: