Question

我想在我的主页的.intro-body添加视差滚动效果，就像我将此效果添加到我的'关于'，'恢复'和''上的jumbotron图像一样投资组合页面。但是出于某种原因，当我将它应用于.bg类时，背景图像不会显示。图像在其他页面上正确显示;唯一的区别是我在#intro之前使用.bg我已经这样做了，我可以设置这个图像的样式以适应屏幕的整个高度和宽度。

background: CSS属性在下面的小提琴中显示一个图像，但我无法在我自己的网站上显示它：

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，内联样式会消失，背景图片也会有效。

编辑*：作为旁注。我注意到你有两个不同版本的jquery资源。

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

和

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

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

没有显示在.bg类元素的背景图象

1 个答案: