Question

我正在开发一个项目，我们正在使用包含文本的块。块具有标题图像。结果应如下图所示。

我面临的问题是使用CSS background-url属性设置图像，这使图像位于文本下方而不是显示为标题图像。我正在使用下面的代码，为了这个问题的目的，如上图所示：

.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被background覆盖。{{1} } class。

这是fiddle。

Answer 2

如果您确实想使用背景图片，请考虑使用％padding。这也有助于布局保持响应。此外，cover强制背景图片覆盖整个div，因此您根本不需要它。

＆＃13;

.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: 100% auto;
  background-repeat: no-repeat;
  padding-top: 32%;
}

＆＃13;

<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>

＆＃13;

Answer 3

我保留使用<img>而不是背景图片的原始建议。它更容易实现，语义更正确。

我试图在下面的图片中模拟结果：

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="row content">
        <img class="header_img" src="https://www.facebook.com/rsrc.php/v2/yq/r/ZAmUp1oGGPN.png" />
        <div class="col-md-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>
  </div>
</div>

CSS：

.header_img{
  width: 100%;
  height: auto;
}

.content{
  background-color: white;
  border-radius: 5px;
  margin-top: 20px;
  overflow: hidden;
}

演示：http://jsfiddle.net/bh7Lh42k/1/

背景网址不在文本下方

3 个答案: