背景附着：固定（background-attachment: fixed）与背景位置（background-position）不兼容的问题

Question

我已经制作了一个代码笔来解释我的问题：

• 当用户滚动时，蓝色图像应该跟随用户滚动
• 蓝色图像应该固定在侧边部分的相反位置（左侧的右侧|右侧的左侧）

问题在于：

background-attachment : fixed;

这个CSS规则与

background-position: left 0px;

不兼容。有人能帮我通过fork codepen来展示一个有效的实现吗？

.wrapper {
  display: flex;
}

main {
  background-color: red;
  height: 1000px;
  max-width: 992px;
  width: 100%;
}

aside {
  min-width: 150px;
  background-color: green;
}

.left {
  background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
  background-repeat: no-repeat;
  background-position: right 0px;
  /*background-attachment: fixed; Doesn't work*/
}

.right {
  background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
  background-repeat: no-repeat;
  background-position: left 0px;
  /*background-attachment: fixed; Doesn't work*/
}

<div class="wrapper">
  <aside class="left"></aside>
  <main></main>
  <aside class="right"></aside>
</div>

- Frédéric GRATI

Answer 1

问题在于你滚动的是 body 而不是 aside
你应该避免这样做，因为它不具有响应性，但你可以理解其中的意思。

.wrapper {
  width: 558px;
  background-color: green;
  background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png), url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left 47px top 0px, right 104px top 0px;
  background-attachment: fixed;
}

main {
  background-color: red;
  width: 280px;
  height: 1000px;
  margin: 0px auto;
}

<div class="wrapper">
  <aside class="left"></aside>
  <main></main>
  <aside class="right"></aside>
</div>

- UfguFugullu

Answer 2

为什么会这样？

这是预期效果，当你使用 background-position: fixed; 时，背景相对于视口定位。这意味着在你的例子中，背景现在对齐于视口的最左侧，超出了 .right 元素。

你可以通过将 .right 定位到视口的左侧来在下面的片段中查看此效果。

.wrapper {
  display: flex;
}

main {
  background-color: red;
  height: 1000px;
  max-width: 992px;
  width: 100%;
}

aside {
  min-width: 150px;
  background-color: green;
}

.left {
  background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
  background-repeat: no-repeat;
  background-position: right 0px;
  /*background-attachment: fixed; Doesn't work*/
}

.right {
  background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
  background-repeat: no-repeat;
  background-position: left 0px;
  background-attachment: fixed;
  order: -1;
}

<div class="wrapper">
  <aside class="left"></aside>
  <main></main>
  <aside class="right"></aside>
</div>

你能做什么？

使用background-position: fixed;时，没有办法将背景相对于元素定位，但是您可以通过使用position: fixed;伪元素来实现类似的期望结果：

• 添加一个新的选择器.left:before, .right:before，具有以下规则
  • background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png); - 背景图像
  • background-repeat: no-repeat; - 阻止背景重复
  • content: ""; - 伪元素显示所需
  • position: fixed; - 将伪元素设置为相对于视口固定
  • height: 100%; - 使伪元素填充整个高度
  • width: 100px; - 与背景图像的宽度相同

.wrapper {
  display: flex;
}

main {
  background-color: red;
  height: 1000px;
  max-width: 992px;
  width: 100%;
}

aside {
  min-width: 150px;
  background-color: green;
}

.left {
  direction: rtl;
}

.left:before, .right:before {
  background-image: url(http://www.bodyacademy.fr/wp-content/uploads/2015/02/Bande_bleu1-100x500.png);
  background-repeat: no-repeat;
  content: "";
  position: fixed;
  height: 100%;
  width: 100%;
}

.left:before {
  background-position: right top;
}

.right:before {
  background-position: left top;
}

.right div {
  position: relative;
}

<div class="wrapper">
  <aside class="left"></aside>
  <main></main>
  <aside class="right">
    <div>content</div>
  </aside>
</div>

请注意，如果您想将其他内容放入 .right 中，则需要向该元素添加 position: relative; 以将堆叠上下文设置为伪元素之上（请参见代码段中的 div）。

这是为什么呢？position: fixed; 将元素固定在相对于视口的固定位置。通过不设置 bottom、left、right 或 top 位置，伪元素保持其原始位置。可以按照通常的方式将背景应用于元素。

- Hidden Hobbes

---

非常感谢！！

• 我可以将 .right:before 的 width: 100%; 设置为自适应宽度吗？（我不知道图片的大小）
• 我可以移除 .right:before 的 background-position: 0 top; 吗？（与您的解释不同，但似乎没有问题）

- Frédéric GRATI

抱歉，是的，可以删除.right上的background规则，并且您应该能够更改为width: 100％;，尽管当您开始添加额外内容时，您可能需要注意堆叠上下文。 - Hidden Hobbes

很抱歉，但似乎左侧不能正常工作 :/ https://codepen.io/anon/pen/PjYvqm - Frédéric GRATI

是的，这种方法对于左侧是行不通的。我会考虑一下左侧可以做些什么。背景图像的“宽度”始终未知吗？ - Hidden Hobbes

@FrédéricGRATI 你可以通过在 .left 中使用 direction: rtl; 来实现相同的效果 - https://codepen.io/anon/pen/NgWqXz。 - Hidden Hobbes