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

2023-12-04

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

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

pb 是这样的

background-attachment : fixed;

这个CSS规则不起作用

background-position: left 0px;

有人可以通过分叉 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>

为什么会发生这种情况？

当您使用时，这将按预期工作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;伪元素：

Add a new selector .left:before, .right:before with the following rules
- 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 or top伪元素保留在其原始位置的位置。背景可以以通常的方式应用到元素上。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

backgroundimage

fixed