修复了iOS中某个网站(div)的背景

我想有一个固定的位置背景图像,只覆盖整个屏幕的一部分我的网站(实际上是两个部分,但独立,所以没有区别)。 我在该部分的容器DIV上使用此CSS:

#wrapper { background-image: url(../img/bg1_IMG_1509.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } 

(注意:我使用的是单独的属性,而不是简单的background希望这可以与更多的设备和浏览器兼容,但似乎不是这样。)

这在所有的桌面和浏览器中,以及在android上的一些浏览器上或多或less地工作,但在iOS中完全不起作用。 在iOS中,背景不仅被滚动,而且还被垂直拉伸,使得背景图像的高度覆盖整个DIV,其在移动设备上具有很多内容并变得相当高,导致看到更多或在屏幕上放弃的像素更less。 所以,既不fixed也不cover工作。

我知道/已经阅读了iOS的固定位置解决scheme的答案,该解决scheme在<body>标签中使用了position: fixed的DIV和全屏背景图片。 但是我不想在整个机构上这样做,而只是在两个(独立的)部分,在这种情况下,解决方法是不能使用的。

我find了这个 :

 .bg { background: url(image.jpg); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; height: 100%; width: 100%; position: fixed; background-position: center center; background-repeat: no-repeat; } 

这里: https : //css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/page/3/

基本上你把你的背景放在另一个div中,并给div的固定属性,而不是背景。 您需要添加z-index:-1; 并添加白色背景或任何隐藏图片,你不想看到它。