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

Question

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

我正在使用 Bootstrap 3，我目前有以下 HTML 标记（"white-bg" 的 CSS 仅由一行背景色和底部的灰色是通过设置body的background-color):

<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 放在 container-fluid

的 class 中

好的，这是一个工作示例

.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;
}

不过，我建议再添加一个class，比方说“up”到col-lg-12 包含图像和标题并风格化 .up 因为覆盖 bootstrap classes 等通常不是一个好主意。

Answer 3

将您的标题、图片和 body 文本全部添加到 div、行、部分。不要将您的内容分成两个部分来迎合背景颜色，而是使用渐变背景并将其应用于文档的部分或 body。

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

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

Using CSS to position an image above the following <div>

html

css

layout

position