8

我使用以下 CSS 来创建固定的正文背景。它适用于几乎所有浏览器，除了新的 iOS7。在后者上，背景不再固定。它随页面滚动。知道如何解决问题吗？

    body {
       background-color: #000; 
       background-image: url('../pics/backgrounds/blackWhite.jpg');
       background-repeat: no-repeat; 
       background-position: center;
       background-attachment: fixed;       
       webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;     
    }

干杯

4

8 回答 8

8

我会尝试找到一些参考，但移动浏览器会强制background: scroll执行，因为重新绘制太贵了。

参考：

CSS - 背景图像无法在移动浏览器上正确显示

@PaulIrish也注意到了这一点：

固定背景具有巨大的重绘成本并降低滚动性能，我相信这就是它被禁用的原因。

不过，有一些方法可以解决这个问题。但这不是一个快速的解决方案。看看下面的问题和它的评论。

Android/Mobile Webkit CSS Background-Attachment：固定不工作？

于 2013-09-27T07:58:36.570 回答
3

我建议查看滚动器（https://github.com/Prinzhorn/skrollr）。这是一个视差库，可让您实现相同的效果。他们也仔细考虑了移动设备的问题：

关于为什么这是一个重要的里程碑以及为什么其他人失败的一些话：移动浏览器尽可能地节省电池电量。这就是为什么移动浏览器会在您滚动时延迟 JavaScript 的执行。尤其是 iOS，它非常积极地完全停止了 JavaScript。简而言之，这就是为什么许多滚动库要么不能在移动设备上运行，要么它们带有自己的滚动条，这是桌面上的可用性噩梦。这是我开发 skrollr 时的一个重要要求，我不会强迫您按照我想要的方式滚动。桌面上的 skrollr 使用本机滚动条，您可以按照您想要的方式滚动（键盘、鼠标等）。

您刚刚告诉我它在移动设备上不起作用，但是为什么会这样呢？答案很简单。在移动设备上使用 skrollr 时，您实际上并没有滚动。当检测到移动浏览器时，skrollr 会禁用本​​机滚动，而是监听触摸事件并使用 CSS 转换移动内容（更具体地说是 #skrollr-body 元素）。

下面是一个经典视差背景实现的例子：http: //prinzhorn.github.io/skrollr/examples/classic.html

在示例页面上说明，另一个值得注意的宝石：

没有 JavaScript 的降级（可以在移动设备上禁用而不会破坏一切）。

于 2015-03-05T08:48:05.947 回答
2

升级到 iOS7 时，我注意到后台附件问题。我不得不使用 Javascript 解决这个问题，因为我无法单独使用 CSS 找到解决方案。

if (iosVersion >= 7) {
    $(document).scroll(function() {
        $('#background').css('background-position', '0px ' + $(document).scrollTop() + 'px');
    });
}
于 2013-10-26T00:44:26.430 回答
1

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

到目前为止，唯一已知的问题是在 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:13:24.817 回答
0

我一直在搜索，并使用了 github 上 Prinzhorn 解决方案的基础知识。谢谢，因为它工作得很好。我只有一个背景图像显示在除 iPad 之外的每台设备上，现在图像背景附加 = 固定，图像背景大小：封面。

于 2015-11-06T07:59:56.610 回答
0

弄乱背景大小我发现如果您的桌面大小可以被覆盖并且位置可以固定，那么在媒体查询上进行background-size: 100% 100vh

我在这里发布了另一个问题的答案。

于 2018-07-13T18:09:48.107 回答
0 
document.body.onscroll = function(){
    document.body.style.backgroundPositionY = window.pageYOffset +"px";
};
于 2021-12-27T10:25:15.423 回答
-1

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

我在我的移动 IOS 设备上遇到了问题。

CSS（桌面）

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

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

然后我用媒体查询覆盖它，删除“固定”作为背景附件。

CSS（移动）

@media (max-width: 767px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial - 将此属性设置为其默认值。我认为因为 IOS 不接受“固定”，所以它会退回到它接受的默认值，滚动。

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

于 2017-06-07T13:14:34.577 回答