47

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

我错过了什么？

4

12 回答 12

50

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

或者

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

于 2013-12-07T17:21:32.300 回答
18

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

依赖视口大小可能会失败。例如，依靠 767px 视口在 iPad 上不起作用，并且增加尺寸会抵消这种方法的好处。

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

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

您还可以检查设备是否具有粗指针（例如手指）而不是细指针（例如鼠标）：

@media (pointer: coarse) { ... }
于 2017-11-27T18:34:47.777 回答
11

在尝试了所有解决此问题的方法之后，我有一个非常简单的解决方案。

我在我的移动 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 不接受“固定”，所以它会退回到它接受的默认值，滚动。

这在每台设备上都对我有用。希望它对其他人也有帮助。

于 2017-06-07T13:04:24.010 回答
8

编辑：2020 年 9 月这对一些 iPad 来说已经坏了，所以我现在使用：

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

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

    background-attachment: scroll;

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

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

@supports (-webkit-overflow-scrolling: touch) {
  .widget-wrap {
  background-attachment: scroll;
  }
}
于 2018-09-10T22:33:16.260 回答
8

尝试这个：

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

活生生的例子

于 2015-12-22T23:10:15.597 回答
5 
.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 设备上工作的修复程序实现了预期的效果。

于 2016-04-22T12:32:44.923 回答
4

我遇到了与您相同的问题，并为此苦苦挣扎了将近 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>

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

于 2020-06-19T23:51:06.653 回答
3

这样的事情呢？（我刚刚注意到@mems 已经提出了它）

    body {
      position: relative;
    }

    body:after {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      content: '';
      background-image: url(./img/YOUR_IMG.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-color: #000;
      background-position: bottom right;
    }
于 2019-07-19T15:29:21.793 回答
1

使用 CSS 透视而不是 JS 或固定背景视差以获得最佳性能和设备兼容性。

body, html { 
  margin: 0;
  padding:0;
}

.wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
}

.parallax::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
  background-size: 100%;
  z-index: -1;
  background-image: url('http://placeimg.com/640/480/any');
}

.content {
  height: 200vh;
  display: flex;
  justify-content: center;
  background: red;
}
<div class="wrapper">
  <div class="section parallax">
   <h1>Heading</h1>
  </div>
  <div class="content">
    <h1>Site Content</h1>
  </div>
</div>

于 2019-10-02T15:14:33.360 回答
1

或者您可以只放置一个覆盖屏幕的透明 div 并使用溢出：滚动。只是为了它，你可以用javascript将div的高度重写为screen.height。

#scrollbox {
	width: 100%;
	height: 100%;
	overflow: scroll;
	background: transparent;
}

document.getElementByID("scrollbox").style.height = screen.height;

于 2017-10-25T19:27:34.917 回答
0

我的解决方案是一种解决方法。我创建了一个 100% 的 div，固定，并添加了背景图像，因为 iOS 仍然忽略“背景附件：固定”。

<div style="
 position: fixed;
 width: 100%;
 height: 100%;
 background-size: cover;
 background-position:center;
 top: 0; right: 0;
 z-index: -1000;
 background-image: url(image.jpg)">
</div>
于 2020-04-15T01:56:56.683 回答
0 
.imageDiv {
  background: url('image.jpg') center center no-repeat fixed;
  background-size: cover;
}

@supports (-webkit-touch-callout: none) {
  .imageDiv {
      background: url('image.jpg') center top no-repeat scroll;
      background-size: auto 100vh;
  }
}
于 2022-02-20T13:06:41.547 回答