Question

我正在维护网店http://www.binkfournituren.nl。样式表包含几行响应行为的代码。

响应行为的部分更改是页脚背景图像。最初打开网站全屏时，图像设置在body标签上，如下所示：

body{
   margin:0;
   padding:0;
   color:#444;
   font-family:"Georgia",Verdana,Arial,Helvetica,sans-serif;
   min-height:100%;
   background:url(../image/footer-bg-400-Green.png) left bottom repeat-x
}

在平板电脑/手机或较小的浏览器窗口中查看页面时，应在body元素上设置不同的图像。这应该使用以下css代码来完成：

@media only screen and (max-width: 960px)
body {
    background: url(../image/footer-bg-900-Green.png) left bottom repeat-x;
}

当我使用chrome浏览器检查body元素时，图像似乎可用。我可以将鼠标悬停在css图像链接上并实际看到图像。直接链接也有效：http://www.binkfournituren.nl/catalog/view/theme/shoppest/image/footer-bg-900-Green.png

这一直有效，直到我们迁移到VPS环境。文件属性指示对文件夹的读写访问权限。可以在以下浏览器中重现当前行为：

Firefox
Chrome
IE 9/10/11
Safari浏览器
iPad Mini
Android设备

IE 8是否显示背景图像？

对调整视口大小时背景图像不可见的原因有什么建议吗？

Answer 1

IE8不支持媒体查询。所以浏览器忽略了这一点：

@media only screen and (max-width: 960px)
body {
    background: url(../image/footer-bg-900-Green.png) left bottom repeat-x;
}

CSS媒体正文背景图像不可见

1 个答案: