使用background-attachment：在safari上固定在ipad上 [英] Using background-attachment:fixed in safari on the ipad
问题描述
我想重现一个类似于流行科学应用程序的效果。基本上有一个大的背景图像，然后有HTML / CSS层顶部。当用户滚动内容时，图片的背景位置应保持不变，而不滚动。
显然，在常规浏览器中，附件：固定，但这似乎并不工作在ipad上。我知道位置：固定不工作，因为你可能期望根据safari规范 - 但有什么办法实现这一点吗？
p>您可以使用此代码制作一个固定的背景图层来解决此问题。
#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 < / body>
< / div> pre>
< body>
< div id =background_wrap>< / div>
< / body>
I'm looking to recreate an effect similiar to the popular science app. Basically have one big background image and then have HTML/CSS layer on top of that. When the user scrolls the content, then background-position of the image should remain in place, and not scroll.
Obviously in a 'regular' browser I would use background-attachment:fixed, but this doesn't seem to work on the ipad. I know position:fixed doesn't work as you might expect according to safari spec - but is there any way of achieving this?
You can use this code to make a fixed background layer to hack this problem.
#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;
}
And put <div id="background_wrap"></div> into <body></body>
<body>
<div id="background_wrap"></div>
</body>
这篇关于使用background-attachment：在safari上固定在ipad上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
