如何根据屏幕大小更改背景图像？
如何根据屏幕大小更改背景图像？
提问于 2014-01-29 08:10:19
我正在使用Zurb基金会来处理我的样式，我知道有一个数据交换类可以根据屏幕大小更改图像，但不确定是否可以使用它来更改div的背景图像？
background-image:image-url('img_home_first_bar.jpg'); 回答 2
Stack Overflow用户
发布于 2014-01-29 08:16:45
您可以通过使用媒体查询来做到这一点，正如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设置为更改。
注意：使结果窗口越来越大，以查看效果。
DEMO HERE
Stack Overflow用户
发布于 2014-01-29 08:30:47
尝试这样做，因为您的问题类似于这里讨论的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21425423
复制相关文章
相似问题
腾讯云开发者
