我有一个项目,我正在使用固定的背景图像.它适用于除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

我错过了什么？

1> brouxhaha..：

---

使用background-attachment: fixedwith background-size: cover会导致大多数移动浏览器出现问题(如您所见).你可以尝试使用background-attachment: scroll.这不会产生你想要的效果,但你至少会看到这些图像.您可以使用一两个媒体查询将其限制为平板电脑或手机设备@media screen and (max-device-width: 1024px){}

要么

您可以使用background-position: scroll并包含一些将图像保持在滚动位置的javascript(将其保持在窗口顶部):DEMO

---

但如果你发生视差,*不*使用'固定'将打破视差.标记为此副本的"重复"的问题包含更多信息和对变通方法的引用.见这里:http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios

2> Ylama..：

---

在解决了解决这个问题的所有方法之后,我有一个非常简单的解决方案.

我在我的移动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不接受'固定'它会回退到它接受的默认值,滚动.

这在我的每台设备上都适用.希望它也可以帮助别人.

3> Cruz Nunez..：

---

试试这个:

HTML

  

  
Words that go over text

css

.fixed-img {
  position: fixed;
  z-index: -1;
}

JSFiddle示例

实例

---

您可以使用伪元素:`.container :: before {content:""; display:block; position:fixed; z-index:-1; height:100%; width:100%}`,你不要不需要在DOM中添加任何元素

4> Tim..：

---

知道这是一个旧线程，但想提供一个基于@ Cruz-Nunez的解决方案的更新解决方案

依赖视口大小可能会失败。例如，仅靠767像素的视口在iPad上不起作用，而增大尺寸则否定了这种方法的优势。

相反，您可以检查设备是否具有悬停功能，如果没有，则可以像这样覆盖：

@media (hover: none) {
   .homeHero {
       background-attachment: initial;
   }
}

您还可以检查设备是否具有路线指示器（例如，手指）而不是精细的指示器（例如，鼠标）：

@media (pointer: coarse) { ... }