html - 不要在整行中显示背景图片

Question

我试图在三列背景中显示全宽图像。我想如果我将三列包裹在一个 div 中并在 div 上放置一个背景，它就会发生，而不是在整个屏幕上显示背景。我该怎么做才能让它只显示在 hr 行下方的背景中。

所以我不希望背景显示在部分中:什么是苹果？苹果树 (Malus domestica) 是蔷薇科落叶乔木，以其甜美的果仁状果实苹果而闻名。

这是我的 Boot : http://www.bootply.com/BT0SWRh3aq

这是我的 html:

     <div class="content-section-a">

        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2>What is an Apple?</h2>
                    <p>The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
                    <hr class="section-heading-spacer">
                    <div class="clearfix"></div>
                    </div>
              <div class="row" id="bg-pink-data-points">  
              <div class="col-md-4 col-xs-12">
                    <h3>LADY</h3>
                    <p>One of the oldest known varieties, this tiny apple is said to have gotten its name because women would keep them in their purses to sniff when they encountered bad odors.</p>
                </div>
                <div class="col-md-4 col-xs-12">
                    <h3>GRANNY SMITH</h3>
                    <p>The Baldwin was among the most popular American apples until 1934, when a freeze wiped out most of its trees.</p>
                </div>
                <div class="col-md-4 col-xs-12">
                    <h3>GOLDEN DELICIOUS</h3>
                    <p>This heirloom hails from Denmark, but in the United States, it's grown almost exclusively in Sonoma County, CA, where it's celebrated with an annual festival. </p>
                </div>
                    </div>
        </div>
        <!-- /.container -->

    </div></div>

Here's a CSS:

    #bg-pink-data-points {
            background-image: url("http://10steps.sg/wp-content/uploads//2012/11/White-christmas-light-background.jpg");
        }

.content-section-a {
    padding: 50px 0;
}

Answer 1

看起来你的 HTML 结构 .row 在另一个 .row 中有轻微的干扰，你可以试试这个:

<div class="content-section-a">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2>What is an Apple?</h2>
                    <p>The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
                    <hr class="section-heading-spacer">
                    <div class="clearfix"></div>
                </div>                
            </div>
            <div class="row" id="bg-pink-data-points">
                <div class="col-md-4 col-xs-12">
                    <h3>LADY</h3>
                    <p>One of the oldest known varieties, this tiny apple is said to have gotten its name because women would keep them in their purses to sniff when they encountered bad odors.</p>
                </div>
                <div class="col-md-4 col-xs-12">
                    <h3>GRANNY SMITH</h3>
                    <p>The Baldwin was among the most popular American apples until 1934, when a freeze wiped out most of its trees.</p>
                </div>
                <div class="col-md-4 col-xs-12">
                    <h3>GOLDEN DELICIOUS</h3>
                    <p>This heirloom hails from Denmark, but in the United States, it's grown almost exclusively in Sonoma County, CA, where it's celebrated with an annual festival. </p>
                </div>
            </div>
        </div>
        <!-- /.container -->
    </div>

演示网址: http://www.bootply.com/0m5JJ6pMM0

如果您想扩展背景，您还可以使用为背景设置样式的相同 CSS 属性 #bg-pink-data-points:

#bg-pink-data-points {
    background-image: url("http://10steps.sg/wp-content/uploads//2012/11/White-christmas-light-background.jpg");
    padding: 10px;
}

您还可以尝试更多选项。 演示网址: http://www.bootply.com/Poi6HlXOa8