我这里有整个部分:
<section id="design-centre">
<section id="design-centre-cover">
<div class="container">
<div class="row">
<div class="cover-left">
<h1>Our Designs Make Luxury More Affordable</h1>
</div>
</div>
</div>
</section>
</section>
这是 CSS:
section#design-centre {
position: relative;
}
background: url(../images/design-center-cover.jpg) center top no-repeat;
height: 800px;
background-attachment: fixed;
}
我想做的是:
当用户滚动时让图像滚动,这是我正在寻找的示例:
http://www.hush.ca/hush-design-main/#hush-design
我尝试使用 background-attachment: fixed;
但那根本不起作用
最佳答案
目前,如果没有 JavaScript,这似乎是不可能的。尝试 some tutorials例如代码。主要前提是使用 vanilla JavaScript window.onscroll
或 jQuery $(window).scroll()
事件处理程序来检测主页的滚动,并重新定位相应的背景。
此外,下次您可能想要 search SO在提出您自己的问题之前,首先针对重复/类似的问题。
关于html - CSS - 视差图像不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31881529/