Question

我目前使用引导程序模板制作了一个网站，可以在http://apparelaid.us找到它。它在桌面上工作正常，但在移动设备上，它不显示背景图像（附带截图）。代码可以在https://github.com/aalap07/ApparelAid找到。如何修复代码以使图像在移动设备（iPhone）上正确显示？

https://media.cheggcdn.com/media%2Fa99%2Fa99c5fe4-1490-4306-b9cc-98adc6ac75c4%2Fimage

Answer 1

style.css文件中有三个media queries专门更改横幅的背景图片。这三个断点（媒体查询）发生在480px（第1253行），414px（第1321行）和384px（第1362行）。在这种情况下，图像将被更改为图像文件夹中不存在的另一个图像，因此它显示为空白的白色背景。

解决方案： 在两个断点处删除类.banner的背景属性，以便

    .banner {
         background: url(../images/banner22.jpg) no-repeat -150px 0px;
         background-size: cover;
         min-height: 400px;
    }

变成这个

   .banner {
       min-height: 400px;  
   }

或

将图片上传到您希望在移动设备上查看网站时显示的图片文件夹，并相应地在style.css

中更改背景网址

Bootstrap.css - 未在iPhone上加载背景图像

1 个答案: