使用背景附件：在 ipad 上的 safari 中修复答案

【问题标题】：Using background-attachment:fixed in safari on the ipad使用背景附件：在 ipad 上的 safari 中修复
【发布时间】：2011-03-01 23:21:00
【问题描述】：

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

显然，在“常规”浏览器中，我会使用 background-attachment:fixed，但这似乎不适用于 ipad。根据 safari 规范，我知道 position:fixed 不能像您预期的那样工作 - 但有什么方法可以实现这一点吗？

【问题讨论】：

Fixed background image with ios7的可能重复

标签： css ipad html

【解决方案1】：

我相信您可以将背景图片放在 div 中，并将 z-index 设置为显示在其他内容的后面。之后您可以使用 javascript 来修复包含背景图像的 div 的位置。

【讨论】：

【解决方案2】：

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

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

（给评论者Mac的帽子提示）

【讨论】：

它不起作用。演示：使用 iPad（我的是 Pro，iOS 11.3），浏览w3schools.com/cssref/…。添加行-webkit-background-size: 200px 358px;，单击“运行”并亲自查看。此外，Mac 链接已损坏。

【解决方案3】：

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

#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;
}

并将<div id="background_wrap"></div> 放入<body></body>

<body>
<div id="background_wrap"></div>
</body>

【讨论】：

【解决方案4】：

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;
}

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

position: fixed

已在 Ipad 和 iPhone 中解决

【讨论】：

...但是 -moz- 是 Mozilla，而不是 iPhone (= Webkit) 前缀？
根本不起作用。还有font-family:Arial; 和正文边距与解决方案有什么关系？

【解决方案5】：

在上面 Anlai 的回答中展开，我发现解决方案是在我滚动时重复我的图像，而不是保持它固定。如果其他人有这个问题，我的 background_wrap 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;
}

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

【讨论】：

【解决方案6】：

我不是专业人士，但我已经使用 jquery 解决了这个问题。这很简单）代码如下：

	jQuery(window).scroll(function(){
		var fromtop = jQuery(window).scrollTop();
		jQuery(" your element ").css({"background-position-y": fromtop+"px"});
	});

【讨论】：

【解决方案7】：

和Ig365类似，我发现Angolao的解决方案会导致图像重复，具体取决于图像比例；然而，Ig365 的图像并没有模仿 background-fixed 的位置。为此，请添加background-position-x: 50%;。（根据您的图像尺寸，您可能还需要background-position-y: 50%。）

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    background-position-x: 50%;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url('imageURL');
    background-repeat: no-repeat;
}

【讨论】：