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

时间:2010-06-10 02:19:24

标签: css ipad html5

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

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

7 个答案:

答案 0 :(得分:14)

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

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

答案 1 :(得分:3)

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

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

(评论者提示Mac

答案 2 :(得分:2)

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

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

答案 3 :(得分:1)

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

答案 4 :(得分:0)

我不是那个人,但我已经解决了这个问题。 jQuery的。 这很简单) 这是代码:

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

答案 5 :(得分:-1)

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

答案 6 :(得分:-1)

类似于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;
}