背景分割不完全匹配

Question

这是一个很难回答的问题。 查看codepen将让您更好地了解我正在尝试做什么。

但基本上，我想在块中分割图像（在我的情况下，我使用的是background ），以便能够使用不同的动画为这些不同的块设置动画。

TL; DR; 我希望左边的一组块看起来像我创建的这个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就在这里 。

可能的解决方案（但我不明白为什么）。

我注意到，如果不是.block { background-size: 100% 100%*$num-of-blocks }我这样做： .block { background-size: 100% 100%*($num-of-blocks + 1) }

它有点像我瞄准的图像，但对我来说没有意义。 如果这解决了问题，这是怎么回事？为什么会这样？ 或者为什么不+1.1而不是+1等..？

Answer 1

对此的回答很难解释，但我会尽力而为。 问题的根本原因是当使用百分比值时 background-position如何工作。 请在此处查看我的答案 ，了解有关其工作原理的详细信息。 我在这里写一个单独的答案来解释为什么你提出的解决方案（问题）有效而不是原始解决方案。

正如你可以在链接的答案，当百分比值用于看到background-position ， 浏览器尝试 在其容器中的对应点 沿 对齐用百分比值图像中指定的点 。

来自W3C规格：

使用“14％84％”的值对，图像的14％和84％的点位于填充框的14％和84％的位置。

---

为什么原始代码段不会产生预期的输出？

第一个块在所提供的任何一个片段中都不是问题 ，因为它尝试将图像上的0% 0%与容器上的0% 0%对齐。 在第二个和后续的块中可以看到问题。

为了便于说明，我们假设整个页面的高度为600px。 这意味着，每个单独块的高度将是600px的16.66667％，大致等于100px。 background的高度也只有600px，因为即使我们说600％它是容器尺寸的600％而600px的600％是600px。

通过上述假设，让我们看看背景定位如何适用于第二个块 ：

• 指向图像上的Y轴 - 600px的16.66667％，大约下降100px。
• 在容器的Y轴上指向 - 100px的16.66667％，大约是16.66667px。 但是因为我们已经在这个块上方有一个100px的块，所以它实际上变为116.66667px。

同样， 对于第三个块 ：

• 在图像上的Y轴指向 - 600px的33.33333％，大约200px向下。
• 在容器的Y轴上指向 - 100px的33.33333％，大约是33.33333px。 但是因为我们已经有两个100px以上的块，所以它实际上下降了233.33333px。

正如你所看到的那样，在no方面存在脱节。 我们在页面上向下移动的像素和图像上的像素。 这就是错位的原因。

 .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="" /> 

---

为什么第二个片段会产生预期的输出？

让我们再假设整页的高度是600px。 这意味着，每个块的高度将是600px的16.66667％，大致等于100px。 这里background高度为700px，因为这是容器尺寸的700％。

通过上述假设，让我们看看背景定位如何适用于第二个块 ：

• 指向图像上的Y轴 - 占700px的16.66667％，大约是116.66667px。
• 在容器的Y轴上指向 - 100px的16.66667％，大约是16.66667px。 但是因为我们已经在这个块上方有一个100px的块，所以它实际上变为116.66667px。

同样， 对于第三个块 ：

• 在图像上的Y轴指向 - 700px的33.33333％，其约为233.33333px。
• 在容器的Y轴上指向 - 100px的33.33333％，大约是33.33333px。 但是因为我们已经有两个100px以上的块，所以它实际上下降了233.33333px。

正如你所看到的，这里没有关于no的断开。 我们在页面上向下移动的像素和图像上的像素。 因此，没有错位，它们准确排列600px高的图像。

 .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轴 - 600px的20％，即120px向下。
• 指向容器上的Y轴 - 100px的20％，即20px向下。 但是因为我们已经在这个块上方有一个100px的块，所以它实际上会降低120px。

同样， 对于第三个块 ：

• 指向图像上的Y轴 - 600px的40％，即240px。
• 指向容器上的Y轴 - 100px的40％，即40px。 但是因为我们已经有两个100px以上的块，它实际上会减少240px。