以下是更新后的**Demo**
这实际上是一个玩position: absolute的游戏。你得到的示例站点也是这样做的。它实际上是<img>标签，而不是背景
以下是代码：

.container{
	max-width: 600px;
	position: absolute;
	top: 10px;
}
img{
	max-width: 600px;
}
.divider{
	width: 10px;
	position: absolute;
	top: 0px;
	height: 100%;
	background: white;
}
.one{
	left: 150px;
}
.two{
	left: 300px;
}
.three{
	left: 450px;
}

<div class="container">
	<img src="https://static.wixstatic.com/media/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg/v1/fill/w_880,h_500,al_c,q_85/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg" alt="">
	<div class="divider one"></div>
	<div class="divider two"></div>
	<div class="divider three"></div>
</div>

对于响应图像，我建议您尝试 Bootstrap ：
http://www.w3schools.com/bootstrap/bootstrap_images.asp

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

或者你也可以使用css来做这件事，请点击链接：http://www.w3schools.com/css/css_rwd_images.asp

在该示例中，div是透明的，可以让背景图像透过。
想象你有四扇Windows。你在它们后面放一张巨大的画。这就是它们。
您可以进一步研究价值观的背景：透明”来获得经验。

刚刚帮了忙也许你可以用这个方法

*,:before,:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  position: relative;
  display: inline-block;
  height: 400px;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.divider {
  width: 25%;
  border: 10px solid #fff;
  position: relative;
  display: inline-block;
  float: left;
  top: 0px;
  height: 100%;
}

.btn {
  background: green;
  color: white;
  width: 100%;
  position: absolute;
  bottom: 3em;
  padding: 1em;
  text-align: center;
  text-decoration: none;
}

<div class="container">
	<img src="https://static.wixstatic.com/media/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg/v1/fill/w_880,h_500,al_c,q_85/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg" alt="">
	<div class="divider one"><a class="btn" href="#">Button</a></div>
	<div class="divider two"><a class="btn" href="#">Button</a></div>
	<div class="divider three"><a class="btn" href="#">Button</a></div>
	<div class="divider four"><a class="btn" href="#">Button</a></div>
</div>

这里有一个响应性更强的解决方案。它有响应性的div（列和横幅）和背景。与示例网站不同，容器不是固定宽度的。
https://jsfiddle.net/Lqzqo5xf/
通过将min-width属性应用于.wrapper类，还可以在屏幕收缩到特定大小时将容器设置为固定宽度。
就像你给出的例子一样，它需要divs作为分隔符（白色的列）和一个单独的容器与背景重叠，它也使用绝对定位作为分隔符，但是使用百分比作为响应。

.wrapper {
  width: 100%;
  height:400px;
  margin:0;
  padding:0;
  position: absolute;
  top:0;
  left:0;
}

#bg-wrapper {
  background-image: url('http://www.gstatic.com/webp/gallery/1.jpg');
  background-size: cover; /** Also try "contain" **/
}

.banner {
  float: left;
  margin-top: 70px;
  width: 25%;
  height: 50px;
  background-color: rgba(0,0,0,0.7);
  vertical-align:middle;
  text-align: center;
  color:white;
}

.divider {
  position: absolute;
  width:2%;
  height: 100%;
  background-color: white;
  margin: 0 0 0 -1%;
  padding: 0;
}

<div class="wrapper" id="bg-wrapper">
    <div class="banner">
      <h4>
      willkommen
    </div>
    <div class="banner">
      <h4>
      willkommen
    </div>
    <div class="banner">
      <h4>
      willkommen
    </div>
    <div class="banner">
      <h4>
      willkommen
    </div>
</div>
<div class="wrapper">
  <div class="divider" style="left:25%;">
  </div>
  <div class="divider" style="left: 50%;">
  </div>
  <div class="divider" style="left:75%;">
  </div>
</div>

新的前端-er在这里。如果你有一个网格（或使用灵活框）为多个项目，并希望使用边界半径，这个问题如何解决？上面的分隔解决方案，虽然聪明-不会做。我试图解决使用多个层绝对定位在对方的顶部，z索引，也背景剪辑和背景颜色：透明的。在我的代码中，我让顶层的grid-items没有border-radius，只是为了显示两层的位置。如果你想在grid-items周围白色，似乎没有什么效果。

body {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container-bottom-layer {
            position: absolute;
            display: grid;
            grid: auto-flow / 1fr 1fr 1fr;
            background-image: linear-gradient(90deg, yellow, purple);
            border-radius: 15px;
            padding: 20px;
            border: 1px solid black;
            z-index: 1;
        }

        .container-item-bottom {
            margin: 15px;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            border-radius: 10px;
        }

        .container-top-layer {
            position: absolute;
            display: grid;
            grid: auto-flow / 1fr 1fr 1fr;

            background-color: white;
            padding: 15px;

            /* background-clip: padding-box; */
            /* background-clip: padding-box; */
            /* -webkit-background-clip: padding-box; */
            /* color: transparent; */

            /*z-index: 1;*/
        }

        .container-item-top {
            margin: 15px;
            width: 100px;
            height: 100px;
            border: 1px solid black;

            /* background-clip: content-box; */
            /* -webkit-background-clip: content-box; */
            background-color: transparent;

            z-index: 2;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="container-bottom-layer">
        <div class="container-item-bottom"></div>
        <div class="container-item-bottom"></div>
        <div class="container-item-bottom"></div>
        <div class="container-item-bottom"></div>
        <div class="container-item-bottom"></div>
        <div class="container-item-bottom"></div>
        <div class="container-item-bottom"></div>
        <div class="container-item-bottom"></div>
        <div class="container-item-bottom"></div>
    </div>

    <div class="container-top-layer">
        <div class="container-item-top"></div>
        <div class="container-item-top"></div>
        <div class="container-item-top"></div>
        <div class="container-item-top"></div>
        <div class="container-item-top"></div>
        <div class="container-item-top"></div>
        <div class="container-item-top"></div>
        <div class="container-item-top"></div>
        <div class="container-item-top"></div>
    </div>

</body>

</html>