html - .bg 类元素上未显示背景图像

Question

我想将视差滚动效果添加到我主页的 .intro-body 中，就像我将此效果添加到我的“关于”中的超大屏幕图像中一样、“简历”和“作品集”页面。然而，出于某种原因，当我将它应用于 .bg 类时，背景图像没有显示。图像在其他页面上正确显示；唯一的区别是我在 .bg 之前使用了 #intro 我已经这样做了，这样我就可以设置此图像的样式以适应屏幕的整个高度和宽度。

background: CSS 属性在下面的 fiddle 中显示了一张图片，但我无法在我自己的网站上使用它:

https://jsfiddle.net/c3do6hj0/

我这里有什么地方做错了吗？我花了大约 3 个小时研究 SO 但无济于事，所以非常感谢任何想法，谢谢

My homepage

HTML

<header class="intro" id="intro">
<div class="bg"></div>
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h1 class="brand-heading">Jon Howlett</h1>
                    <p class="intro-text">Aspiring web designer<br/>&amp;<br/>front-end developer</p>
                    <a href="#summary" class="btn btn-circle page-scroll">
                        <i class="fa fa-angle-double-down animate">    </i><span class="zero">Button Down</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>

CSS

#intro .bg {
background: url("https://upload.wikimedia.org/wikipedia/common/5/57/LA_Skyline_Mountains2.jpg") no-repeat scroll center bottom / cover;
background-size: cover!important;
position: fixed;
width: 100%;
height: 1000px;
top:0;
left:0;
z-index: -1;    
}

.intro-body {
width: 100%;
height: auto;
padding: 100px 0px;
text-align: center;
color: #FFF;
background: transparent;
}

Answer 1

您在 .bg div 上有一个内联样式:height:0px;。

如果我将 background: #000 url("images/intropage_mountains.jpg") no-repeat scroll center bottom/cover; 添加到 .bg div 然后禁用背景图像显示的内联样式。

看来您的某个 javascript 文件中的某些内容正在应用这种内联样式。

当我将类更改为其他内容(例如 bg_main)时，内联样式消失并且背景图像有效。

编辑*:作为旁注。我注意到您有 2 个不同版本的 jquery 资源。

http://code.jquery.com/jquery-2.1.4.min.js

和

http://www.jonhowlett.uk/js/jquery.js

我建议您只保留最新版本。拥有多个 jquery 资源有时会导致与您的代码发生冲突。