如何将“背景图片放在另一个div上”？

Question

这个问题可能并不酷，但是想知道解决此任务的正确方法。 当然可以使用HTML，CSS，Bootstrap。 像这样：

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