Question

我已经查看了与该问题相关的SO的几个答案，并以此来编写我的CSS代码（我以前使用的是简写形式）：

#intro {
    background-image: url(http://www.trbimg.com/img-5a98709c/turbine/ct-met-illinois-legislature-marijuana-20180301); 
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

当我调整窗口大小或将视图更改为iPhone X时，这在我的计算机和Chrome上的开发人员工具中均能正常工作。

当我使用实际的iPhone前往网站时，仅显示灰色背景，根本没有图像。我已经在Chrome和Safari中尝试过。

有人对为什么会有所了解吗？

我尝试过的事情：

查看了关于SO的类似问题，这些问题帮助我无需使用速记background来重写CSS。
将图像存储在服务器上并缩小后，使其宽度为1000px（原始宽度的一半）

我计划将来将图像实际存储在服务器上，但是我认为如果有人有时间帮助我在线链接到大图像，那将是最好的。

编辑：

我为#intro元素添加了CodePen。

为什么我的CSS背景图片无法在手机上显示？

0 个答案: