使用ios7修复了背景图片

Question

我有一个正在使用固定背景图像的项目。它对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我想念什么？

Answer 1

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

要么

您可以使用background-position: scroll并包含一些JavaScript，它将图像保持在滚动位置（将其保持在窗口顶部）：DEMO

Answer 2

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

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

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

@media (hover: none) {

   .homeHero {

       background-attachment: initial;

   }

}

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

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