我怎样才能在最下面的两行显示背景

Question

我的容器中有三行。我想在最下面的两行应用一个背景。我不想在第一排有背景。我想使用一个背景ac，我知道我遗漏了一些东西，但无法在代码中找到编辑它的位置。我的背景只显示在第一行的列中。

我不想对每个需要背景的行应用一个类。重点是指定一次背景，并将其应用于底部的两行。

这是我的战利品：http://www.bootply.com/X5WsoQbuM1

这是我的HTML:

<div class="content-section-d">
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h2>How many apples can you eat?</h2>
                <p>
                    The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple. I.</p>
        </div>
    </div>
        <h2>Join us to pick the apples:</h2>
            <div class="row centered-text" id="backgroundazul">
            <div class="col-md-4 col-xs-12">
                <h3>4,000,000+</h3>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>1,500,000+</h3>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>150,000+</h3>
            </div>
                </div>
             <div class="row">
            <div class="col-md-4 col-xs-12">
                <h3>68,000+</h3>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>2,000+</h3>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>3 years</h3>
            </div>
                </div>
               </div>
    <!-- /.container -->

这是我的CSS：

#backgroundazul {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;

}

Answer 1

如果您想要所有行的背景，请使用一个类并重复行

/* CSS used here will be applied after bootstrap.css */
.backgroundazul {
    background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
   padding: 0 0 50px 0;
}

    <div class="container">
            <div class="row">
                <h2>Join us to access:</h2>
            </div>
            <div class="row centered-text backgroundazul " >
                <hr class="section-heading-spacer">
            <div class="col-md-4 col-xs-12">
                <h3>4,000,000+</h3>
              <p>Apples</p>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>1,500,000+</h3>
                <p>Oranges</p>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>150,000+</h3>
                <p>Mangos</p>
            </div>
             </div>
            <div class="row centered-text backgroundazul " >
            <div class="col-md-4 col-xs-12">
                <h3>68,000+</h3>
                <p>Bananas</p>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>2,000+</h3>
                <p>Honeydew</p>
            </div>
            <div class="col-md-4 col-xs-12">
                <h3>3 years</h3>
                <p>Blueberries</p>
            </div>
                </div>

Answer 2

对.container元素应用id，然后对.row元素应用背景。

<div id="backgroundazul" class="container">
    <div class="row">
        <!-- ... -->
    </div>
    <div class="row">
        <!-- ... -->
    </div>
</div>

#backgroundazul .row {
    background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
    padding: 0 0 50px 0;
}

已更新Bootply。请注意，您没有将第二行数据包装在.row中，也不会应用背景。我不知道这是不是故意的。

Answer 3

解决方案很简单-您只需要在css代码中插入一行代码，这样代码就会看起来像：

#backgroundazul{
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
background-size: cover;
padding: 0 0 50px 0;
}

就是这样：-）