Question

要问一个难题。 查看codepen会让你更好地了解我正在尝试做什么。

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

TL; DR; 我希望我创建的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％。在那之后，我“scooch”每个背景向上应该是。

但获得的块看起来如下图所示。你可以看到他们完全不匹配。我的问题是，我做错了什么？如果是这样，我该怎样以及如何解决它？

codepen is right here。

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

我注意到，如果我代替.block { background-size: 100% 100%*$num-of-blocks }：.block { background-size: 100% 100%*($num-of-blocks + 1) }

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

Answer 1

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

正如您在链接的答案中所看到的，当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方面存在脱节。我们在页面上向下移动的像素和图像上的像素。这就是为什么会有错位。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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

让我们再次假设整页的高度为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.33333像素。
指向容器上的Y轴 - 100px的33.33333％，约为33.33333px。但是因为我们已经有两个100px以上的块，它实际上变成了233.33333px。

正如你所看到的，在这里，没有任何脱节。我们在页面上向下移动的像素和图像上的像素。因此没有错位，它们准确地排列了600px高的图像。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

在上面的方法中，图像的底部（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);
    }
  }
}

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

除了具有不同的值集之外，计算逻辑与上述类似。对于第二块：

指向图像上的Y轴 - 600px的20％，即120px。
指向容器上的Y轴 - 100px的20％，即20px向下。但是因为我们已经有超过这个块100px的块，所以它实际上会降低120px。

同样，为第三个块：

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

背景拆分不完全匹配

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

1 个答案: