div及其子之间有白线？

Question

我有一个div，它和它的孩子之间有一条白线。该问题发生在Chrome和其他浏览器中。

我想知道如何删除它们。这是我的代码：

<div class="front">
  <div>
    <div>
      <div></div>
    </div>
  </div>
</div>

和CSS：

.front {
  height: 200px;
  width: 200px;
  font-size: 0;
}

.front div {
  position: absolute;
  left: 100%;
  height: 100%;
  width: 100%;
}

.front,
.front div {
  background: url("images/img.jpg");
  background-size: 200% 100%;
  image-rendering: crisp-edges;
}

.front>div {
  background-position-x: 50%;
}

.front div>div {
  background-position-x: 50%;
}

结果：

红色背景：

Answer 1

尝试用于每个块：

.front::after {
   content: '';
   display: inline-block;
   background-image: url('<pathToImage');
   background-repeat: repeat;
   back
}

好的，另一种方式。您能在jsbin.com的codepen.io中演示它吗？