Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/macos/9.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
css背景大小:是否在IOS上忽略包含?_Ios_Stellar.js - Fatal编程技术网

css背景大小:是否在IOS上忽略包含?

css背景大小:是否在IOS上忽略包含?,ios,stellar.js,Ios,Stellar.js,我正在我的网站上使用。这在所有设备和浏览器上都能完美运行,iOS Safari除外 您可以在此处找到此错误的示例: 在iPhone上,幻灯片7/8如下所示(背景尺寸:封面;未被覆盖,而另一个背景则根本未显示): 我尝试了不同的css属性,比如背景位置:中-中,背景大小:620px 230px,背景尺寸:包含等等,但都不起作用。有人知道如何在iOS safari上包含bg图像吗?好的,我终于找到了在iOS设备上修复bg图像的解决方案: .slide { -webkit-b

我正在我的网站上使用。这在所有设备和浏览器上都能完美运行,iOS Safari除外

您可以在此处找到此错误的示例: 在iPhone上,幻灯片7/8如下所示(
背景尺寸:封面;
未被覆盖,而另一个背景则根本未显示):


我尝试了不同的css属性,比如
背景位置:中-中
背景大小:620px 230px
背景尺寸:包含等等,但都不起作用。有人知道如何在iOS safari上包含bg图像吗?

好的,我终于找到了在iOS设备上修复bg图像的解决方案:

.slide {        
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;

    background-origin: content-box;
    -moz-background-origin: content;
    -webkit-background-origin: content-box;     
}

@media 
  /* ----------- iPhone 4 and 4S ----------- */
  only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2),
  /* ----------- iPhone 5 and 5S ----------- */
  only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2),
  /* ----------- iPhone 6 ----------- */
  only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2),
  /* ----------- iPhone 6+ ----------- */
  only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3),
  /* ----------- iPad mini ----------- */
  only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1),
  /* ----------- iPad 1 and 2 ----------- */
  only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1),
  /* ----------- iPad 3 and 4 ----------- */
  only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .slide {
        background-attachment: scroll;
    }
}