html - 两个div之间的轻微透明空间

Question

我有两个 div 一个在另一个上面。顶部 div 在底部有一个背景 .svg，其颜色与底部 div 的背景相同。这些应该完美对齐，然而，他们没有。它们之间有非常小的透明空间。这个空间在放大时消失，在进一步放大时重新出现(见屏幕截图)。

.top {
  width: 100%;
  height: 100vh;
  background-color: #3772ff;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20378%20378%22%3E%3Cpath%20d%3D%22M0%2C378l378%2C-0l-0%2C-47.25l-378%2C47.25Z%22%20style%3D%22fill%3A%2301161e%3B%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-attachment: scroll;
  background-size: 100%;
  margin: 0;
}

.bottom {
  background-color: #01161e;
  padding: 128px 20%;
}

<div class="top"></div>
<div class="bottom"></div>

截图:

100% 缩放:

放大一点:

进一步放大:

Answer 1

可能有更优雅的解决方案，但只需将较低的元素拉高一个像素的一小部分即可克服亚像素舍入问题。

.top {
  width: 100%;
  height: 100vh;
  background-color: #3772ff;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20378%20378%22%3E%3Cpath%20d%3D%22M0%2C378l378%2C-0l-0%2C-47.25l-378%2C47.25Z%22%20style%3D%22fill%3A%2301161e%3B%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-attachment: scroll;
  background-size: 100%;
  margin: 0;
}

.bottom {
  background-color: #01161e;
  padding: 128px 20%;
  margin-top: -.5px;
  /* transform: translateY(-.5px); alternative approach */
}

<div class="top"></div>
<div class="bottom"></div>

当然，你也可以设置 body 背景(或容器元素的背景)来隐藏它:

.container {
  background-color: #01161e;
}

.top {
  width: 100%;
  height: 100vh;
  background-color: #3772ff;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20378%20378%22%3E%3Cpath%20d%3D%22M0%2C378l378%2C-0l-0%2C-47.25l-378%2C47.25Z%22%20style%3D%22fill%3A%2301161e%3B%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-attachment: scroll;
  background-size: 100%;
  margin: 0;
}

.bottom {
  background-color: #01161e;
  padding: 128px 20%;
}

<div class="container">
  <div class="top"></div>
  <div class="bottom"></div>
</div>