背景附件：固定在 Chrome 上向后移动答案

【问题标题】：background-attachment: fixed moving backwards on Chrome背景附件：固定在 Chrome 上向后移动
【发布时间】：2018-06-02 18:05:32
【问题描述】：

我在 Chrome（macOS 上的 v67）中遇到了 background-position: fixed 的一个非常奇怪的错误，当我滚动时背景图像实际上向上移动，而不是 fixed。

这是问题的代码：https://codepen.io/alexismo/pen/xzwmRE 这是它的 GIF：https://gfycat.com/PolishedHarshAfricangroundhornbill

页面内容的结构如下

<body>
    <div class="background-image"></div>
    <div class="rest-of-the-site"></div>
</body>

.background-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    z-index: -1;
}

【问题讨论】：

标签： html css background-position

【解决方案1】：

这看起来像是最新版本的 Chrome 中的一个错误。这不是预期的行为。如果尚未输入错误报告，我建议您提交一份错误报告。

【讨论】：

【解决方案2】：

这不是一个错误，这就是背景附件应该如何工作。如果你想让图像留在屏幕上，你应该使用 position:fixed;

【讨论】：

这真的是它应该如何工作的吗？它在 Firefox 或 Edge 中不那样工作，在任何以前版本的 Chrome 中也不那样工作。最新的 Chrome 更新（Windows 上的 67.0.3396.62）完全改变了我网站的背景滚动行为。
我可能不正确，但位置固定在 codepen 中有效，所以我写了答案。我不是真正的 css 专家，但在代码笔中有绝对位置，这可能是它不会滚动的原因。

【解决方案3】：

它以所需的方式工作。为了更清楚，请通过this

虽然您希望实现的目标可以通过对代码进行一点调整来完成：

.background-image {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url('http://alexismorin.com/images/watertown.jpg');
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

p {
  color: #333;
}

<div class="background-image">
  <div>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
  </div>
</div>

【讨论】：

Master.Deep 您的示例始终显示背景图像。这不是我想要的。我希望背景图像最终被其余内容（所有
aragraphs）覆盖，因为它们被滚动到视图中。在此处查看position:fixed 的行为：css-tricks.com/almanac/properties/b/background-attachment

【解决方案4】：

我通常使用伪元素来代替。试试这个：

body:after{
    content: '';
    background-image: url('http://alexismorin.com/images/watertown.jpg');
    background-size: cover;
    opacity: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: -1;
}

【讨论】：

【解决方案5】：

首先，将position: relative 应用到body 标签，因为它是背景图像div 的祖先。

然后将.background-image的高度设置为100vh。这将使它成为窗口的高度，但它并不总是在视图中。

/* Since the body element is the parent of the .background-image, we need to set its position to relative */
body {
  position: relative;
}

.background-image {
  position: absolute;
  width: 100%;
  height: 100vh; /* be exactly the height of the viewport, no bigger */
  top: 0;
  left: 0;
  background-image: url('http://alexismorin.com/images/watertown.jpg');
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

p {
  color: #333;
}

<div class="background-image"></div>
<div>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p><p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p><p>
    Site is here
  </p><p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
</div>

【讨论】：

【解决方案6】：

这是 Google Chrome 67 中的一个错误。这将修复它，试一试：

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

【讨论】：

很遗憾对我的问题没有帮助。

【解决方案7】：

我遇到了同样的问题，它涉及这样一个事实，即在 CSS 规则的层次结构中，有一个“位置：绝对”位于您的“位置：固定”之上。寻找导致您的问题的绝对定位。对我来说，我进入 Chrome 的开发者工具并取消选中位置与“固定”相反的框，直到我查明问题。我的是一段 Javascript 代码。希望这可以帮助某人。

【讨论】：