css - 背景网址不在文本下方

Question

我正在做一个元素，我们正在使用包含文本的 block 。这些 block 有一个标题图像。结果应该类似于下图。

我面临的问题是图像是使用 CSS background-url properly 设置的，这使得图像位于文本下方而不是显示为标题图像。我正在使用下面的代码，以上面图片的样式来解决这个问题:

.block {
  background-color: #fff;
  border-radius: 5px;
  padding: 20px 40px 20px 40px;
  margin: 10px 10px 10px 10px;
}

.header {
  background: url('https://www.facebook.com/rsrc.php/v2/yq/r/ZAmUp1oGGPN.png');
  background-size: contain;
  height: 300px;
}

这创建了 <div>这是我需要的，但是正如您在下图中看到的那样，它并没有给我想要的结果。

我试过设置 .header至 display: block ，但这并没有改变任何东西。我也尝试过使用 margin强制文本显示在图像下方，这也不起作用。有人可以帮助我获得我想要的结果吗？

相关的 HTML 在下方。

<div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="block header">
                    <h1>A Bootstrap Starter Template</h1>
                    <p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
                    <ul class="list-unstyled">
                        <li>Bootstrap v3.3.6</li>
                        <li>jQuery v1.11.1</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

Answer 1

将您的 html 更改为以下内容:

<div class="container">
   <div class="row">
      <div class="col-lg-12">
         <div class="header">
         </div>
         <div class="block">
            <h1>A Bootstrap Starter Template</h1>
            <p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
            <ul class="list-unstyled">
               <li>Bootstrap v3.3.6</li>
               <li>jQuery v1.11.1</li>
            </ul>
         </div>
      </div>
   </div>
</div>

您已将 block 和 header 放在同一个 div 中，因此您的 background-color 在 .block 中类被 .header 类的 background 覆盖。

这里是 fiddle .