Question

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

显然在'常规'浏览器中我会使用background-attachment：fixed，但这似乎不适用于ipad。我知道位置：根据safari规范修复不起作用 - 但有没有办法实现这个目标？

Answer 1

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

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

Answer 2

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

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

（评论者提示Mac）

Answer 3

扩展Anlai上面的答案，我发现解决方案正在重复我的图像，因为我正在滚动而不是保持它固定。如果有其他人遇到此问题，我的back_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;
}

只需更改背景大小和背景附件即可使图像保持静态。

Answer 4

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

Answer 5

我不是那个人，但我已经解决了这个问题。 jQuery的。这很简单）这是代码：

＆＃13;

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

＆＃13;

Answer 6

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中解决

Answer 7

类似于Ig365，我发现安哥拉的解决方案会根据图像比例导致图像重复。但是，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;
}

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

7 个答案: