修复了与ios7的背景图像
我有一个项目，我正在使用固定的背景图像。 除了ios7之外，它在任何事情上都很好用。 在iPad上，背景图像放大，模糊。 这里是我使用的CSS代码 –
.header { display: table; height: 100%; width: 100%; position: relative; color: #fff; background: url(..http://img.dovov.comboston2.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 这里是链接到实况页面 – www.wdeanmedical.com
我错过了什么？
使用background-attachment: fixed使用background-size: cover background-attachment: fixed background-size: cover会导致大多数移动浏览器出现问题（如您所见）。 你可以尝试使用background-attachment: scroll 。 这不会给你想要的效果，但你至less会看到图像。 您可以使用媒体查询或两个媒体查询，通过使用@media screen and (max-device-width: 1024px){}将其限制在平板电脑或手机@media screen and (max-device-width: 1024px){}
要么
你可以使用background-position: scroll和包含一些JavaScript，将图像保持在滚动的位置（保持在窗口的顶部）： DEMO
在解决这个问题的所有方法之后，我有一个非常简单的解决scheme。
我的手机IOS设备出现了问题。
css （桌面）
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { background-size: auto; background-attachment: fixed; } .widget-wrap { background-attachment: scroll; }
然后我覆盖它与媒体查询删除“固定”作为背景附件。
css （手机）
@media (max-width: 767px) { #ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { background-attachment: initial; } }
initial – 将此属性设置为其默认值。 我认为，因为IOS不接受“固定”它回落到它接受的默认值，滚动。
这在每个设备上都适用于我。 希望它可以帮助别人。
尝试这个：
HTML
<div class="container"> <div class="fixed-img"></div> <h1>Words that go over text</h1> </div>
css
.fixed-img { position: fixed; z-index: -1; }
JSFiddle示例
现场示例
.header {background-position: -99999px -99999px;} .header:before {content: ""; background-image: inherit; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover; background-size: cover !important; z-index: -1;}
我相信我已经达到了预期的效果，在我自己的网站上使用上面的修复function，允许100vh在iOS设备上工作。
或者你可以放一个覆盖屏幕的透明div，并使用overflow：scroll。 只是为了它，你可以重写javascript的高度div到screen.height。
#scrollbox { width: 100%; height: 100%; overflow: scroll; background: transparent; }
