修复了与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; }