CSS - 视差图像不起作用答案

【问题标题】：CSS - Parallax Image not workingCSS - 视差图像不起作用
【发布时间】：2015-10-31 02:56:46
【问题描述】：

我这里有整个部分：

<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。

标签： html css

【解决方案1】：

目前，如果没有 JavaScript，这似乎是不可能的。尝试some tutorials 示例代码。主要前提是使用 vanilla JavaScript window.onscroll 或 jQuery $(window).scroll() 事件处理程序来检测主页的滚动，并相应地重新定位背景。

另外，下次您可能想先search SO 询问重复/类似的问题，然后再提出您自己的问题。

【讨论】：