html - 两个宽度为 50% 的 div，内容在容器内

Question

如何实现图片中的效果？

它只是用于列的常规 Bootstrap 代码，但前两列应该在 .container 中的白色 background 上，而另外两列在黑色 background 上 黑色的 background 一直到最后。

CodePen

<div class="container">
<div class="col-md-3">
  <p>First column</p>
  </div>
<div class="col-md-3">
  <p>Second column</p>
  </div>
<div class="col-md-3">
  <p>Third column</p>
  </div>
<div class="col-md-3">
  <p>Fourth column</p>
  </div>
</div>

Answer 1

使用linear-gradient在 body , 给你 .container是 parent ，你不会有任何包装 .container

Sorry that I'm bothering you, but what I meant was to place the image like this image.prntscr.com/image/78940c8115c943a186500ac24556758b.jpeg

添加另一个父级 div (作为 body 的 child )并添加 background-image那个div

body {
  background: linear-gradient(to right, white 0%, white 50%, black 50%, black 50%, black 100%);
}
#wrap {
  background: url(//lorempixel.com/200/200) no-repeat  66.6% 0 / 25% auto
}
.container {
  border: 1px solid #f01;
}
[class^="col-"] p {
  color: white;
  height: 75px;
  background-color: blue
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrap">
  <div class="container">
    <div class="col-xs-3 col-md-3">
      <p>First column</p>
    </div>
    <div class="col-xs-3  col-md-3">
      <p>Second column</p>
    </div>
    <div class="col-xs-3 col-md-3">
      <p>Third column</p>
    </div>
    <div class="col-xs-3 col-md-3">
      <p>Fourth column</p>
    </div>
  </div>
</div>