css - 背景分割不完全匹配

是个很难问的问题。看看密码笔，你会更好地知道我在做什么。
但基本上，我希望将一个图像（在我的例子中，我使用的是background）分割成块，以便能够用不同的动画设置这些不同块的动画。
我希望左侧的块集看起来像我创建的this codepen中的右侧图像。在这个问题的最后，看看可能的解决方案可能会有帮助。
假设我有这张图片（取自谷歌），我选择这张图片是为了让它更明显地显示正在发生的事情。（加上这一点，我不在乎图像的比例，也就是说，如果它在轴上或某个物体上旋转）。
我想把它分成6个街区：

<section class="blocks">
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
</section>

我认为第一个明显的解决方案是使用css w/sass以这种方式对齐背景：

$num-of-blocks: 6;
.blocks {
  // ...
  .block {
    // ...
    height: 100%/$num-of-blocks;
    background-size: 100% 100%*$num-of-blocks;
    // THIS PUTS (allegedly) THE BACKGROUNDS IN PLACE
    // I say allegedly because it is not doing it the way it is supposed to.
    @for $b from 1 through $num-of-blocks {
      &:nth-child(#{$b}){
        background-position: 0% (100%/$num-of-blocks)*($b - 1);
      }
    }
  }
}

css所做的基本上是，让块取可用的高度，然后每个块的background应该取高度的100%乘以块的数量。在那之后，我“挪动”每一个背景，使它应该是。
但是得到的块看起来像下面的图像。你可以看到它们并不完全匹配。我的问题是，我做错什么了吗？如果是，我该怎么做？
codepen is right here。
可能的解决办法（但我不明白为什么）。
我注意到，如果不是.block { background-size: 100% 100%*$num-of-blocks }我会：.block { background-size: 100% 100%*($num-of-blocks + 1) }
它看起来更像是我的目标，但对我来说没有意义。如果这解决了问题，这是怎么发生的，为什么？或者为什么不+1.1而不是+1等等？

最佳答案

这个问题的答案很难解释，但我会尽力的。问题的根本原因是使用百分比值时background-position如何工作。有关其工作原理的详细信息，请查看my answer here。我在这里写一个单独的答案来解释为什么你提出的解决方案（有问题）有效，但不是原来的。
正如您在链接的答案中看到的，当百分比值用于background-position时，浏览器会尝试将图像中的百分比值指定的点与其容器中的相应点对齐。
来自W3C规范：
如果值对为“14%84%”，则图像上14%的点和84%的点将被放置在填充框上14%的点和84%的点上。
为什么原始片段不产生预期的输出？
第一个块在所提供的两个片段中都不是问题，因为它试图将图像上的0% 0%与容器上的0% 0%对齐。问题出现在第二个块和随后的块中。
为了便于说明，我们假设整页的高度是600像素。这意味着，每一块的高度将是600px的16.66667%，大约等于100px。background的高度也只有600px，因为即使我们说600%是容器大小的600%，100px的600%是600px。
基于上述假设，让我们来看看背景定位在第二个块中是如何工作的：
点在Y轴上的图像16.66667%，大约是100px的600 px。
在容器上的Y轴上的点为-100px的16.66667%，大约为16.6667 px。但是因为我们已经有一个100px的块在这个块上面，它实际上变成了116.66667px。
同样，对于第三个块：
点在Y轴上的图像33 - 33333%的600 px，大约是200 px下降。
在容器上的Y轴上的点为-100px的33×33333%，大约为33.33 33 3px。但是因为我们已经有两个100px的块在上面，它实际上变成了233.33333px。
正如你所看到的，我们在页面上向下移动的像素数和图像上的像素数之间存在着一种脱节。这就是为什么会出现偏差。

.blocks {
  float: left; /* display: inline-block causes line break in snippet due to margin*/
  width: 50%;
  height: 100%;
  position: relative;
}
.blocks .block {
  width: 100%;
  height: 16.66667%;
  position: relative;
  background-size: 100% 600%;
  background-image: url("http://phandroid.s3.amazonaws.com/wp-content/uploads/2015/04/line-wallpaper-1.jpg");
}
.blocks .block:nth-child(1) {
  background-position: 0% 0%;
}
.blocks .block:nth-child(2) {
  background-position: 0% 16.66667%;
}
.blocks .block:nth-child(3) {
  background-position: 0% 33.33333%;
}
.blocks .block:nth-child(4) {
  background-position: 0% 50%;
}
.blocks .block:nth-child(5) {
  background-position: 0% 66.66667%;
}
.blocks .block:nth-child(6) {
  background-position: 0% 83.33333%;
}
img {
  float: left;
  width: 50%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}

<section class="blocks">
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
</section>
<img src="http://phandroid.s3.amazonaws.com/wp-content/uploads/2015/04/line-wallpaper-1.jpg" alt="" />

为什么第二个片段会产生预期的输出？
让我们再次假设整页的高度是600像素。这意味着，每一块的高度将是600像素的16.66667%，大约等于100像素。这里background的高度是700px，因为这里是容器大小的700%。
基于上述假设，让我们来看看背景定位在第二个块中是如何工作的：
点在Y轴上的图像-700 px大约为116.66 667 px。
在容器上的Y轴上的点为-100px的16.66667%，大约为16.6667 px。但是因为我们已经有一个100px的块在这个块上面，它实际上变成了116.66667px。
同样，对于第三个块：
点在Y轴上的图像- 33×33333%的700 px，大约是23.33 33 3px下降。
在容器上的Y轴上的点为-100px的33×33333%，大约为33.33 33 3px。但是因为我们已经有两个100px的块在上面，它实际上变成了233.33333px。
如你所见，在这里，我们在页面上向下移动的像素数和在图像上移动的像素数是否没有断开关系。因此不会出现错位，它们精确地排列出600像素高的图像。

.blocks {
  float: left;
  width: 50%;
  height: 100%;
  position: relative;
}
.blocks .block {
  width: 100%;
  height: 16.66667%;
  position: relative;
  background-size: 100% 700%;
  background-image: url("http://phandroid.s3.amazonaws.com/wp-content/uploads/2015/04/line-wallpaper-1.jpg");
}
.blocks .block:nth-child(1) {
  background-position: 0% 0%;
}
.blocks .block:nth-child(2) {
  background-position: 0% 16.66667%;
}
.blocks .block:nth-child(3) {
  background-position: 0% 33.33333%;
}
.blocks .block:nth-child(4) {
  background-position: 0% 50%;
}
.blocks .block:nth-child(5) {
  background-position: 0% 66.66667%;
}
.blocks .block:nth-child(6) {
  background-position: 0% 83.33333%;
}
img {
  float: left;
  width: 50%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}

<section class="blocks">
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
</section>
<img src="http://phandroid.s3.amazonaws.com/wp-content/uploads/2015/04/line-wallpaper-1.jpg" alt="" />

在上述方法中，图像的底部（100px）将被一定程度地切割，因为图像大小为700px（700%），但页面的总高度（容器的组合高度）仅为600px。
如果这是不需要的，可以对background-size和background-position的计算逻辑进行如下修改（仅包括修改部分）：

.block {
  background-size: 100% $h*$num-of-blocks;
  @for $b from 1 through $num-of-blocks {
    &:nth-child(#{$b}){
      background-position: 0% ($h/($num-of-blocks - 1))*($b - 1);
    }
  }
}

.blocks {
  float: left;
  width: 50%;
  height: 100%;
  position: relative;
}
.blocks .block {
  width: 100%;
  height: 16.66667%;
  position: relative;
  background-size: 100% 600%;
  background-image: url("http://phandroid.s3.amazonaws.com/wp-content/uploads/2015/04/line-wallpaper-1.jpg");
}
.blocks .block:nth-child(1) {
  background-position: 0% 0%;
}
.blocks .block:nth-child(2) {
  background-position: 0% 20%;
}
.blocks .block:nth-child(3) {
  background-position: 0% 40%;
}
.blocks .block:nth-child(4) {
  background-position: 0% 60%;
}
.blocks .block:nth-child(5) {
  background-position: 0% 80%;
}
.blocks .block:nth-child(6) {
  background-position: 0% 100%;
}
img {
  float: left;
  width: 50%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}

<section class="blocks">
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
  <article class="block"></article>
</section>
<img src="http://phandroid.s3.amazonaws.com/wp-content/uploads/2015/04/line-wallpaper-1.jpg" alt="" />

计算逻辑与上述类似，只是具有不同的值集。第二个街区：
点在Y轴上的图像- 20%的600 px，这是120 px下降。
在容器的Y轴上点20%—100px，即20px下降。但是因为我们已经有一个100px的块在这个块上面，它实际上变成了120px。
同样，对于第三个块：
点在Y轴上的图像- 40%的600 px，这是240px下降。
在容器的Y轴上的点为100px的40%，即40px下降。但是因为我们已经有两个100px的块在上面，它实际上变成了240px。

关于css - 背景分割不完全匹配，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31798424/