CSS 在 iOS5 中是否有固定工作的背景附件?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9779195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 03:18:46  来源:igfitidea点击:

does a background-attachment of fixed work in iOS5?

cssios

提问by Dylan

Does this work in > iOS 5?

这是否适用于 > iOS 5?

.element {
    background: url(images/myImage.jpg) 50% 0 no-repeat fixed;
}

I thought that it should, but so far it isn't.

我认为它应该,但到目前为止它不是。

采纳答案by o.v.

According to this background-attachment support matrix, no.

根据这个背景附件支持矩阵,没有。

Another postsuggests that coming up with a workaround for mobile devices is not worth it:

另一篇文章表明,为移动设备提出一种解决方法是不值得的:

...both Android and iPhone block timers or render during scroll, so the effect is that divs move with the scrolled page and only after, eventually, divs come back in the expected position. This is against position fixed idea

...Android 和 iPhone 都会在滚动期间阻止计时器或渲染,因此效果是 div 随滚动页面移动,并且只有在最终 div 回到预期位置之后。这是反对位置固定的想法

回答by shshaw

You can potentially get around this using a separate element and position: fixedwhich does work!

您可以使用单独的元素来解决这个问题,position: fixed并且确实有效!

HTML:

HTML:

<div id="Background"></div>

<div id="Content"></div>

CSS:

CSS:

#Background {
    background: #000 url("img/Background.jpg") no-repeat 50% 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}

回答by damiano celent

There are too many issues with the fixed position on mobile and touch devices.

移动和触摸设备上的固定位置问题太多了。

As long the background is not animated in any way(blur, css transistions any JS) AND as long there is no scrollbar, then it is usable and consistent.

只要背景没有以任何方式动画(模糊,css 转换任何 JS)并且只要没有滚动条,那么它就是可用且一致的。

Everything else will-depending on browser- result in undesired results, image pixelation, images scaling 100 fold on IOS devices, "jumping" divs etc.

其他一切都会——取决于浏览器——导致不想要的结果、图像像素化、图像在 IOS 设备上缩放 100 倍、“跳跃”div 等。

The best work around method i have found so far, say, if you want to reproduce a fixed BG scroll page, is to use the parallax method, having one div as scrolling, the next with background transparent, rinse repeat.

到目前为止,我发现的最好的解决方法是,如果你想重现一个固定的 BG 滚动页面,是使用视差方法,有一个 div 作为滚动,下一个背景透明,冲洗重复。

It looks good enough I think, and no plugins are needed.

我认为它看起来足够好,不需要插件。