使用ios7修复了背景图像
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用ios7修复了背景图像相关的知识，希望对你有一定的参考价值。
我有一个项目，我正在使用固定的背景图像。它适用于除ios7之外的所有功能。在ipad上，背景图像被放大并且模糊。这是我正在使用的CSS代码 -
.header {
display: table;
height: 100%;
width: 100%;
position: relative;
color: #fff;
background: url(../images/boston2.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: scroll。这不会产生你想要的效果，但你至少会看到这些图像。您可以使用@media screen and (max-device-width: 1024px){}使用一两个媒体查询将其限制为平板电脑或手机设备
要么
您可以使用background-position: scroll并包含一些将图像保持在滚动位置的javascript（将其保持在窗口的顶部）：DEMO
在解决了解决这个问题的所有方法之后，我有一个非常简单的解决方案。
我在我的移动IOS设备上遇到了问题。
css（桌面）
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}
.widget-wrap {
background-attachment: scroll;
}
然后我用媒体查询覆盖它，删除“固定”作为背景附件。
css（手机）
/*-------- iPads (portrait and landscape) --------*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-attachment: initial;
}
}
initial - 将此属性设置为其默认值。我认为因为IOS不接受'固定'它会回退到它接受的默认值，滚动。
这在我的每台设备上都适用。希望它也可以帮助别人。
试试这个：
<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的例子
知道这是一个旧线程，但希望提供基于@ Cruz-Nunez解决方案的更新解决方案
依赖视口大小可能会失败。例如，依赖于767px视口将无法在iPad上运行，并且增加大小会抵消此方法的好处。
相反，您可以检查设备是否具有悬停功能，如果没有，则覆盖如下：
@media (hover: none) {
.homeHero {
background-attachment: initial;
}
}
您还可以检查设备是否具有课程指针（例如手指）而不是精细指针（例如鼠标）：
@media (pointer: coarse) { ... }
.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;}
我相信我已经在我自己的网站上实现了预期的效果，使用上面的结合修复程序允许100vh在ios设备上工作。
或者你可以放一个覆盖屏幕的透明div并使用overflow：scroll。只是为了它，你可以用javascript重写div的高度到screen.height。
#scrollbox {
width: 100%;
height: 100%;
overflow: scroll;
background: transparent;
}结合@brouxhaha和@yllama的想法：使用针对iOS的媒体查询（在此SO post中找到）来设置
background-attachment: scroll;
这样，固定的背景图像出现在非iOS移动设备和所有其他设备上。
.widget-wrap {
background-attachment: fixed;
...
...
}
@supports (-webkit-overflow-scrolling: touch) {
.widget-wrap {
background-attachment: scroll;
}
}
以上是关于使用ios7修复了背景图像的主要内容，如果未能解决你的问题，请参考以下文章
如何在 ios7 上将导航栏背景图像添加到 MFMailComposeViewController
iOS7 UIPickerView / UIScrollView