背景附件：固定;不使用背景位置

Question

我已经codepen解释了我的问题：

• 当用户滚动时，蓝色图像应该跟随用户滚动
• 蓝色图像应粘贴在旁边部分的另一侧（左侧为左侧|右侧为左侧）

pb就是那个

  

background-attachment : fixed;

这不符合css规则

  

background-position: left 0px;

有人可以通过分配代码栈来向我展示工作实现吗？

.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

问题是您不能滚动aside，因为您滚动了body 你应该避免这种情况，因为它没有响应但是你可以理解它

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;以将堆叠上下文设置为伪元素（请参阅{{1在代码段中。）

为什么这样做？

div将元素固定到相对于视口的设定位置。如果未设置position: fixed;，bottom，left或right位置，则伪元素将保留原始位置。背景可以通常的方式应用于元素。