Question

我正在尝试实现如附图中所示的布局。

我正在使用Bootstrap 3，我目前有以下HTML标记（“white-bg”的CSS只是通过一行背景颜色来完成，底部的灰色是通过设置背景颜色来实现的身体）：

<body class="gray-bg">
<section class="white-bg">
<div class="row">
    <div class="col-lg-12">
        <h2 class="text-center">Title</h2>
        <img class="feature-image" src="./images/image.jpg" alt="">
    </div>
</div>
</section>

<section>
<div class="row">
    <div class="col-lg-12">
        <p>Body text...</p>
    </div>
</div>
</section>
</body>

我想知道我需要在CSS中使用.feature-image才能实现我想要的布局？

非常感谢！

Answer 1

我在移动设备上，所以我无法检查我的答案，但是给你的gray_bg div一个负的上边距应该可以解决问题。像这个margin-top：-10px; 也。你可能不得不把你的底部div放在一个容器流体

类中

好的，这是一个有效的例子

.white-bg {
  background-color: white;
  }

.feature-image {
 background-color: lightgray;
  padding-top: 100px;
  padding-bottom: 50px;
  padding-left: 50px;
  padding-right: 50px;
  margin-left: 150px;
  margin-bottom: -20px;
  }
.gray-bg {
  background-color: gray;
  }

<body class="gray-bg">
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    </head>
<section class="white-bg">
<div class="row">
    <div class="col-lg-12">
        <h2 class="text-center">Title</h2>
        <img class="feature-image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRnL5-GO2muNIeI97gaUNYWdyzB5tLozHkacW4O8Q0TNWQC35ns" alt="">
    </div>
</div>
</section>

<section>
<div class="row">
    <div class="col-lg-12">
        <p>Body text...</p>
    </div>
</div>
</section>
</body>

Answer 2

您可以尝试使用以下CSS：

.col-lg-12{
    position:relative;
    top:-300px;
}

但是，我建议添加另一个课程，让我们说＆＃34; up ＆＃34;到包含图像和标题的 col-lg-12 ，并将 .up 样式化，因为覆盖引导类等通常不是一个好主意。

Answer 3

将标题，图像和正文全部添加到一个div，row，section中。不要将内容分成两部分以满足背景颜色，而是使用渐变背景并将其应用于文档的部分或正文。

http://www.colorzilla.com/gradient-editor/

使用CSS将图像定位在以下<div>上方

3 个答案: