我做了一个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(使用前将#替换为@)