Question

我一直在努力解决这个问题而没有运气。我有一组背景图像，一个用于桌面的全尺寸设置和一组移动优化的图像。

现在，当我在桌面上的Chrome上运行以下代码并调整浏览器大小以激活@media时，所有内容都运行良好且看起来正确。但是当我接着在IPhone上进行Safari测试时，我只得到一个空白点，背景图像应该是。

<meta name="viewport" content="width=device-width, initial-scale=1">


section.box_park {
    min-height: 500px;
    background: url('/images/sample-park.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

section.box_building_management {
    min-height: 500px;
    background: url('/images/building-management.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media only screen and (max-width: 420px) {

    section.box_building_management {
        background: url('/images/mobile-building-management.jpg') no-repeat center center fixed; 
    }

    section.box_park {
        background: url('/images/mobile-sample-park.jpg') no-repeat center center fixed; 
    }

}

知道为什么会这样吗？

*更新*

如果我注释掉@media，它将显示背景图像，但显然不是移动优化的图像。

IOS Safari背景图像不显示@Media和CSS

0 个答案: