Question

我有一个CSS背景图片无法显示的问题，任何人都可以为什么不显示图像？我无法弄明白自己。

    <!-- Section: services -->
<section id="service" class="home-section text-center bg-gray">

    <div class="heading-about">
        <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <div class="wow bounceInDown" data-wow-delay="0.4s">
                <div class="section-heading">
                <h2>SCHEMA!</h2>
                <i class="fa fa-2x fa-angle-down"></i>

                </div>
                </div>
            </div>
        </div>
        </div>
    </div>

<br>TEST<br>

            </div>
            </div>
        </div>
    </div>      
    </div>
</section>
<!-- /Section: services -->

.service {
width:100%;

position:relative;

background: url(../img/bg2.jpg) no-repeat top center;
}

Answer 1

您想在引用ID元素时使用#service。

#service {
width:100%;

position:relative;

background: url(../img/bg2.jpg) no-repeat top center;
}

可以找到关于css选择器的好指南here。

Answer 2

您将顶级元素定义为：

<section id="service" class="home-section text-center bg-gray">

所以你给它 id “服务”，而不是类。

因此你的css应该是：

#service {
  width:100%;
  position:relative;
  background: url(../img/bg2.jpg) no-repeat top center;
}

注意引导#而不是.。

Answer 3

在我看来，你在CSS中引用了类“.service {...”而不是section元素的id。所以你必须使用“#service {...”而不是“.service {...”

CSS背景图片不起作用

3 个答案: