Question

这个问题可能并不酷，但想知道解决此任务的正确方法。当然使用HTML，CSS，Bootstrap。 Something like this:

Answer 1

快速示例，使用负边距顶部将部分放在其他部分上，如果愿意，可以用背景图像替换样式。

   <section style="background:red;width:100%;height:300px">
   </section>
   <section style="width:100%;margin-top:-150px">
        <div class="container">
              <div style="width:100%;height:300px; background: white;"></div>
         </div>
   </section>

Answer 2

使用CSS transform：

.cover {
  background: blue;
  height: 100px
}

.block {
  transform: translate(0, -65px);
  padding: 0 20px;
}

.text {
  background: red;
  height: 150px;
}

<div class="cover"></div>
<div class="block">
    <div class="text">Hello, "Background Image over another div"</div>
</div>

Answer 3

这应该做你想要的。 https://codepen.io/anon/pen/KevYXE

基本上我创建了一个DIV叠加层和一个背景DIV。背景DIV分为两部分。顶部使用背景图像，底部部分是纯色。我使用叠加的相对位置并使用百分比来确保所有内容都保持居中。

<强> HTML

<div id="wrap">
  <div id="bg-overlay"></div>
  <div id="bg-wrap">
    <div id="bg-top"></div>
    <div id="bg-bottom"></div>
  </div>
</div>

<强> CSS

body {
  margin: 0;
  padding: 0;
}

#wrap {
  width: 100%;
  height: 600px;
  background: #ccc;
  margin: 0 auto;
  position: relative;
  left: 0;
  right: 0;
}

#bg-overlay {
  position: absolute;
  height: 70%;
  max-width: 800px;
  width: 80%;
  top: 15%;
  background: #fff;
  left: 0;
  right: 0;
  margin: 0 auto;
  -webkit-box-shadow: 0 6px 6px -6px #666;
  -moz-box-shadow: 0 6px 6px -6px #666;
  box-shadow: 0 6px 6px -6px #666;
}

#bg-wrap {
  width: 100%;
  height: 100%;
}

#bg-top {
  height: 50%;
  width: 100%;
  float: left;
  background: url("https://picsum.photos/2200/300") no-repeat;
  background-position: center center;
}

#bg-bottom {
  height: 50%;
  width: 100%;
  float: left;
  background: #cccccc; 
}

如何将'背景图像放在另一个div'上？

3 个答案: