修复了 iOS 中部分网站 (div) 的背景答案

【问题标题】：fixed background for part of a site (div) in iOS修复了 iOS 中部分网站 (div) 的背景
【发布时间】：2016-04-09 15:26:03
【问题描述】：

我希望有一个固定位置的背景图像覆盖整个屏幕仅用于我网站的一个部分（实际上是两个部分，但独立，所以没有区别）。我在该部分的容器 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 上的某些浏览器中或多或少都适用，但在 iOS 中则完全不适用。在iOS中，背景不仅在滚动，而且在垂直方向上被极度拉伸，以至于背景图片的高度覆盖了整个DIV，内容很多，在移动设备上变得相当高，导致看到更多或更少的单个像素在屏幕上爆炸。所以，fixed 和 cover 都不起作用。

我知道/已阅读有关 iOS 的固定位置变通办法的答案，这些变通办法在 <body> 标记内使用了 DIV，得到了 position: fixed 和全屏背景图像。但我不希望在整个正文中这样做，而只希望在两个（独立）部分中，并且在这种情况下无法使用解决方法。

【问题讨论】：

height 的 height 是什么？
高度未指定，因此为“自动”，因为它包含许多其他元素/内容。

标签： ios css background-image

【解决方案1】：

我发现了这个：

.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;并添加白色背景或其他任何内容以隐藏您不想看到的图片。

【讨论】：