如何根据屏幕的大小更改背景图像？

Question

我正在使用 Zurb Foundation 来处理我的样式，我知道有一个数据交换类可以根据屏幕尺寸更改图像，但不确定是否可以使用它来更改 div 的背景图像？

background-image:image-url('img_home_first_bar.jpg'); 

Answer 1

您可以通过使用媒体查询来做到这一点，如Rahul Desai的评论中所述。

例子：

HTML：

<div class="backgroundchange"></div>

CSS：

.backgroundchange {
    width: 100px;
    height: 100px;
    background: grey;
}
@media screen and (min-width: 1080px) {
    .backgroundchange {
        background-image: url("backing1.png");
        background: blue;
    }
}
@media screen and (min-width: 487px) and (max-width: 1079px) {
    .backgroundchange {
        background-image: url("backing2.png");
        background: green;
    }
}
@media screen and (max-width: 487px) {
    .backgroundchange {
        background-image: url("backing3.png");
        background: red;
    }
}

因此，使用这些媒体查询，您可以将 CSS 设置为根据窗口大小进行更改。

注意：放大和缩小结果窗口以查看效果。

演示在这里