使用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

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

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

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

Answer 3

我遇到了和你一样的问题，并为此苦苦挣扎了近三天。但截至 2020 年 6 月，并改进了 @AGrush 的答案，这是我找到的一个可靠的解决方案，它适用于所有设备，并且具有 100% 的浏览器兼容性。它允许在页面的任何位置实现所需的效果，而不仅仅是页面的顶部或底部，并且您可以根据需要或想要创建任意数量的效果。

这还解决了 @Ylama、@Cruz-Nunez、@Tim 和 @LWRMS 答案提供的不同问题，这些答案依赖于设备媒体查询，如您所知，这些查询没有标准，并且在许多新设备上有所不同。并且还避免使用我从未真正使用过的伪元素，就像 @MugenFTW 和 @Gianni Unz 提出的解决方案一样。

到目前为止，唯一已知的问题是此选项在 Safari 中。浏览器在每次滚动时都会重新绘制整个图像，因此会给图形带来沉重负担，并且大多数时候会使图像上下闪烁约 10 像素。实际上没有解决这个问题的方法，但我认为对于您的询问也没有更好的答复。

我希望这对你有用。您可以在www.theargw.com上实时查看结果，其中我有三个不同的固定背景图像。

body, .black {
  width: 100%;
  height: 200px;
  background: black;
}

.e-with-fixed-bg {
  width: 100%;
  height: 300px;
  
  /* Important */
  position: relative;
}

.bg-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  transform: translateZ(0);
  will-change: transform;
}

.e-container {
  z-index: 1;
  color: white;
  background: transparent;
}

<div class="black"></div>
<div class="e-with-fixed-bg">
  <div class="bg-wrap">
     <div class="bg"></div>
  </div>
  <div class="e-container">
    <h1>This works well enought</h1>
  </div>
</div>
<div class="black"></div>

--------------------- 编辑 --------------------- 发布的代码缺少背景允许背景不改变大小并保持固定位置的包装器。抱歉今天早上发布了错误的代码，伙计们！但变化就在这里。

Answer 4

编辑：2020 年 9 月这在某些 iPad 上坏了，所以我现在使用：

@supports (-webkit-touch-callout: inherit) {
  .paral {
  background-attachment: scroll;
  }
}

原帖：结合@brouxhaha 和@yllama 的想法：使用针对 iOS 的媒体查询（可在此SO 帖子中找到）来设置

    background-attachment: scroll;

这样，固定背景图像就会出现在非 iOS 移动设备和所有其他设备上。

.widget-wrap {
   background-attachment: fixed;
   ...
   ...
}

@supports (-webkit-overflow-scrolling: touch) {
  .widget-wrap {
  background-attachment: scroll;
  }
}

Answer 5

试试这个:

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示例

实例

Answer 6

.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 设备上工作。

Answer 7

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

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

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

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

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

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