logo标签列表

背景附着：在 Chrome 上向后移动固定。

htmlcssbackground-position
3
我在Chrome（macOS上的v67）中遇到了一个非常奇怪的bug，使用background-position: fixed时，背景图像实际上会随着滚动而向上移动，而不是被固定。以下是问题的Codepen链接：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;
}
7个回答
2
这似乎是Chrome最新版本中的一个错误。这不是预期行为。如果尚未提交错误报告，建议您提交一个错误报告。
0

我通常使用伪元素。尝试这个：

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;
}
0

我曾经遇到过同样的问题，它涉及到CSS规则层次结构中“position: absolute”位于“position: fixed”之上的事实。查找导致问题的绝对定位。对我来说，我进入了Chrome的开发者工具，并取消选中与“fixed”相反的位置框，直到我确定了问题所在。我的问题出现在一段Javascript代码中。希望这能帮助到某些人。

0
首先，将position: relative应用于body标签，因为它是background-image 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>

0

这不是一个 bug，这就是 background-attachment 应该工作的方式。如果你想让图片保持在屏幕上，你应该使用 position:fixed；

这真的是它应该工作的方式吗？它在Firefox或Edge中不起作用，而且在任何早期版本的Chrome中也不会像这样工作。最新Chrome更新（Windows上的67.0.3396.62）完全改变了我的网站的背景滚动行为。 - martin
我不确定你是不是正确的，但是在 CodePen 中“position:fixed” 的确起作用，所以我写了答案。我不是 CSS 专家，但是在 CodePen 中有一个“position:absolute”，这可能就是为什么它无法滚动的原因。 - Mladen Skrbic
0

它正在按照预期的方式工作。为了更清晰，请查看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，您的示例中背景图像始终可见。这不是我想要的。我希望随着内容（所有<p>段落）滚动到视图中，背景图像最终被其余内容覆盖。请参见此处position:fixed的行为：https://css-tricks.com/almanac/properties/b/background-attachment/ - alexismorin
0

这是Google Chrome 67的一个bug。尝试使用以下方法进行修复：

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

更多内容请参见： https://victorfont.com/workaround-for-chrome-67-parallax-bug/

很遗憾，这并没有帮助到我的问题。 - Justin Putney
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接