iphone中不显示背景图像

我不知道为什么我设置的“背景图像”在所有浏览器中都能正常工作，但在Iphone的safari浏览器中却不能正常工作（我需要的浏览器是wich）

这就是问题的相关风格

    /**************************************************
        ESTILOS PARA SINGLE JOB
    **************************************************/


   /*Deleting all styles that dont take any effect with the question*/

    #panel.right ul.visible li a span.liLeft{
             width:95px;
             float:left;height:100%;display:block;
             position:relative;
             right:40px;
             /*HERE I INIT THE STYLE OF THE BACKGROUND IMAGE BUT I DONT SET THE URL*/
             -webkit-background-size: cover;
             -moz-background-size: cover;
             -o-background-size: cover;
             background-size: cover;
             z-index:10;
    }



    #panel.right ul.visible li a span.liRight{
             background:black !important;
             color:#fff;

    }

    #panel.right ul.visible li a span.liRight{
            z-index:9;
    }

    #panel.right ul.visible li#blue a{
            border-color:#0C7CC3;
    }
    #panel.right ul.visible li#pink a{
            border-color:#C21B7B;
    }
    #panel.right ul.visible li#orange a{
            border-color:#E83B35;
    }

    /*  HERE i set the urls for the different Id's and i can't see them in the iphone  */
    #panel.right ul.visible li#blue a span.liLeft{

            background-image:url('http://piscolabis.info/licht/img/azul.png');
    }
    #panel.right ul.visible li#pink  a span.liLeft{
            background-image:url(../img/rosa.png);
    }
    #panel.right ul.visible li#orange  a span.liLeft{
            background-image:url(../img/naranja.png);
    }


    /* deleting more styles*/

您可以在或处查看在线代码

正如您所见，我设置了一个完整路径URL，这样您就可以看到图像在服务器（以及任何桌面浏览器）中，但我不知道为什么图像仍然没有显示在iphone中

（它的显示方式与我没有设置绝对路径的另外两个完全相同（因为它们不在JSDFIDLE中，所以不起作用））

是因为背景图像吗？是因为位置：相对的吗

知道为什么会这样吗

-编辑-

应该是这样的

---

这难道不是一个迷雾吗？

我通过稍微调整一下你的风格，设法让它在我的iPhone上显示出来：

#panel.right ul.visible li a span.liLeft{
     width:95px;
     float:left;
     height:100%;
     display:block;
     position:relative;
     margin-left: -40px;
     margin-right: 40px;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     z-index:10;
}



#panel.right ul.visible li a span.liRight {
     background:black !important;
     float: left;
     color:#fff;
}

OSX上的Safari也存在同样的问题。通过移除

 right: 40px;

在CSS中，图像开始显示

---

您是否在iphone上加载相同的背景图像？这看起来像一个非常巨大的图像，所以它可能不知怎么逃出了视口？我没有iphone可供测试，这是一个无中生有的尝试，但您可以尝试使用meta标记将html设置为符合浏览器视口大小，如下所示：

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

---

或者您可以使用媒体查询以小于480px的视口为目标，以使用不同的、更小的背景图像。

尝试为

#panel.right ul.visible li指定span.liLeft

元素的确切高度。 我修改了你的小提琴，添加了90像素而不是100%，它似乎在我的iphone上工作：

---

对于一个2200x2500px但只有130kb且未加载的图像，我遇到了类似的问题。 看起来智能手机和平板电脑加载的图像宽度不超过1024像素

因此，尝试为特定设备加载较小的图像，它应该可以正常工作

---

编辑：我还删除了图像上的大小调整，出现了大图像。在我的例子中，我删除了

背景大小（或将其置于
自动
）。
我在我的Iphone上看到了这个，我想图像就要出来了。你应该把你的提琴范围缩小到给你带来问题的那部分。那么问题开始的地方在我的问题中，你能看到你手机中的红色、蓝色和粉色图像吗？（右导航菜单中的那些？）你的答案不是一条评论吗$对不起，可能应该是一个评论-我是新手。是的，我能看到红色、蓝色和粉色的图像。哥们，真奇怪。你检查过tje JSFIDLE中的蓝色图像了吗？（为了比较，在黑暗的导航菜单上应该有3个图像，不要将其与右边框混淆）尝试过调整，在CSS中更改这些属性不会使它们显示在我的iphone中。。。你确定吗？这救了我，特别是背景尺寸：cover；。我遇到了一个奇怪的问题，背景图像在桌面Safari上显示良好，在桌面Chrome上显示良好，在iOS模拟器上显示良好，但在实际的物理设备上没有显示。增加背景尺寸：封面；让它无处不在。啊，我在看大背景图像：/非常感谢你的评论，我在拔头发试图找出一个宽背景图像。这解决了我的问题。