Css 使用背景附件：固定在ipad上的safari中

我正在寻找一个类似于科普应用程序的效果。基本上有一个大背景图像，然后在上面有HTML/CSS层。当用户滚动内容时，图像的背景位置应保持不变，而不是滚动

---

显然，在“常规”浏览器中，我会使用背景附件：固定，但这在ipad上似乎不起作用。我知道位置：根据safari规范，fixed可能无法像您预期的那样工作-但有什么方法可以实现这一点吗？

我相信您可以将背景图像放置在div中，并将z索引设置为显示在其他内容后面。之后，您可以使用javascript确定包含背景图像的div的位置。

Mobile safari将整个站点缩小到其视口大小，包括背景图像。要获得正确的效果，请使用-webkit background size CSS属性声明您的背景大小：

-webkit-background-size: 2650px 1440px;

---

（向评论者提示）

您可以使用此代码创建一个固定的背景层来解决此问题

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: 100%;
    background-image: url('xx.jpg');
    background-attachment: fixed;
}

并将

放入

Css中的下一个解决方案：

body {
  background-image: url( ../images/fundobola.jpg );
  background-position: top center;background-repeat:no-repeat;
  background-size: 1900px 1104px;
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll;
}

---不使用---（原因：滚动禁用）

---

在Ipad和iPhone上解决了这个问题

根据安莱的上述回答展开，我发现解决方案是在滚动时重复我的图像，而不是固定不变。如果其他人有此问题，我的后台包装ID CSS如下所示：

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url('../images/compressed/background-mobile.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
}

---

只是更改了背景大小和背景附件以使图像保持静态。

我不是profi-one，但我已经用jquery解决了这个问题。 （很简单） 代码如下：

jQuery（窗口）。滚动（函数（）{
var fromtop=jQuery（window.scrollTop（）；
css（{“background-position-y”：fromtop+“px”}）；
});与Ig365类似，我发现Angolao的解决方案会导致图像重复，具体取决于图像的比例；然而，Ig365的图像并没有模拟背景固定的位置。为此，添加一个
background-position-x:50%。（根据图像尺寸，您可能还需要
background-position-y:50%
）

#背景#{
z指数：-1；
位置：固定；
排名：0；
背景位置x:50%；
身高：100%；
宽度：100%；
背景尺寸：封面；
背景图像：url（'imageURL'）；
背景重复：无重复；
}
…但是
-moz-
是Mozilla，而不是iPhone（=Webkit）前缀？根本不起作用。还有
字体系列：Arial和正文上的边距与解决方案有关？可能重复的解决方案不起作用。演示：用iPad（我的是专业版，iOS 11.3），上网。添加行
-webkit背景大小：200px 358px，单击“运行”并亲自查看。此外，Mac链路断开。
position: fixed

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url('../images/compressed/background-mobile.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
}