Question

我有以下元素：

background-image url('../images/belly.png')
background-position  50% 50%
background-repeat no-repeat
background-attachment fixed
background-size cover

position: fixed;

的基础元素

如果我滚动页面背景不重绘。问题出现在Chrome中。任何解决方案？

演示：http://silentimp.github.io/90daysofbelly/

视频：https://www.youtube.com/watch?v=av6jZciNszo&feature=youtu.be

Answer 1

我注意到确保页面背景保持固定的最佳方法，无论是什么：将它作为身体的空第一个孩子的背景图像，使用这些CSS规则：

.background-holder {
    position: fixed; 
    width: 100%; 
    height: 100%; 
    display: block; 
    z-index: -10; 
    background-image: url(//link-to-image);
    background-size: cover;
}

这是页面结构：

<html>
    <head>
    </head>
    <body>
        <div class="background-holder"></div>
        <div class="main-container">
            <!-- content goes here -->
        </div>
    </body>
</html>

Answer 2

我遇到了与您相同的问题，并为此苦苦挣扎了近三天。但是从2020年6月开始，随着@tao的答案的不断完善，这是我发现的可靠解决方案，它适用于所有设备并且具有100％浏览器兼容性。它可以在页面的任何位置（而不只是页面的顶部或底部）提供所需的效果，并且您可以根据需要创建任意数量的

。

唯一已知的问题是野生动物园。浏览器在每次滚动时都会重新绘制整个图像，因此给图形带来了沉重负担，并且大多数时候使图像上下闪烁约10像素。字面上没有解决办法，但我认为对于您的询问也没有更好的答复。

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

getBM

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

---------------------编辑--------------------- 发布的代码缺少背景包装程序，该包装程序不允许背景大小更改并保持固定位置。抱歉今天早上发布错误的代码！但这是零钱。

在Chrome中重新修复背景附件固定和背景大小封面的错误

2 个答案: