Question

我无法弄清楚这里用来实现视差效果的是什么：www.alwayscreative.net（底部，“我们受到启发......”等等。）

我正试图在my own portfolio site上做类似的事情。这是有问题的CSS（它与当下的内容非常相似）：

.plx-bg1 {
background: transparent url(../img/plx-bg.jpg) no-repeat 0 0;
color: #fff;
max-height: 980px;
padding: 25% 0;
text-align: center;
text-transform: uppercase;
width: 100%;
margin-top: 50px;}

.multiplebgs .plx-bg1 {
background-image: url(../img/plx-seperator.png), url(../img/plx-seperator-bottom.png), url(../img/plx-bg.jpg);
background-position: 0 0, 0 bottom, center bottom;
background-repeat: repeat-x, repeat-x, no-repeat;
background-size: auto auto, auto auto, cover!important;}

我似乎能够通过在plx-bg1背景类（或使用不同的CSS）中添加'fixed'来获得视差效果但是我不能让它与multiplebgs类和顶部的边框一起使用因为他们已经完成了（这真的很酷）因为添加一个“固定”属性打破了它，这显然不是他们如何做到的....

查看他们网站上的代码，我不能为我的生活弄清楚他们用来制作实际视差效果的位置或用途究竟是什么？

Answer 1

请注意，他们在CSS中也有这个，你已经遗漏了：

.inspiration {
    background-attachment: scroll,scroll,fixed;
}

也许你错过了它，因为它是在媒体查询中保存的。

如何使用CSS为节创建一个不随页面滚动的背景？

1 个答案: