html - 背景附件 : fixed; not working with background-position

Question

我做了一个codepen解释我的问题:

• 当用户滚动时，蓝色图片应该跟随用户滚动
• 蓝色图片应该贴在旁边部分的对面(右边是左边的|左边是右边的)

pb就是那个

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>

Answer 1

为什么会这样？

当您使用 background-position: fixed; 时，这是按预期工作的背景相对于视口(viewport)定位。这意味着在您的示例中，背景现在在 .right 之外的视口(viewport)的最左侧对齐。元素。

定位.right可以看到沿着下面代码段中视口(viewport)的左边缘。

.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; - 设置伪元素相对于视口(viewport)固定
  • 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;将元素固定到相对于视口(viewport)的设定位置。通过不设置 bottom , left , right或 top position 伪元素停留在它原来的位置。背景可以以通常的方式应用于元素。