css - 为什么背景图片会随着这个标记缩放？

Question

我的风格定义是:

<style>
  .x { background-image:url(https://raw.githubusercontent.com/iamcal/emoji-data/master/sheet_emojione_64.png); 
       border:solid 1px red; 
     }
</style>

image file上面是 2624px x 2624px，在 64px 方形单元格中包含表情符号。 64是2624的1/41。单元格13,7中的图像是 Camel 。

我的标记是:

<div class='x' style='background-position:-832px -448px; height:64px; width:64px;' ></div>
<div class='x' style='background-position:-832px -448px; background-size:4100%; 
   height:64px; width:64px;' ></div>
<div class='x' style='background-position:-312px -168px; background-size:4100%; 
   height:24px; width:24px;' ></div>

JS Fiddle 位于 https://jsfiddle.net/5j5ahhda/输出是:

我对第二个 DIV 的理解是，我将一个 2624px 的图像压缩到一个 64px 的正方形中，是其大小的 1/41，然后将其放大 41 次，从而得到一个图像与原始尺寸相同。这种理解是否正确？

第三个 DIV 产生了我打算实现的目标，但我不明白是什么导致背景图像很好地缩放到 24/64。导致缩放的是包含 DIV 的指定大小吗？

我想要的是原始图像大小的 24/64。有没有更直接的方法？

Answer 1

My understanding of the second DIV is that I am squeezing a 2624px image into a 64px square, 1/41th of its size, and then blowing it up 41 times, thus resulting in an image the same as the original size. Is this understanding correct?

是的。

The third DIV produces what I was setting out to achieve, but I don't understand what causes the background image to scale nicely to 24/64. Is it the specified size of the containing DIV that causes the scaling?

是的。 background-size 的百分比是 relative to the size of the element's background positioning area .该区域由元素的尺寸决定，而不是图像的尺寸。当设置百分比 background-size 时，这允许背景图像根据元素的尺寸随元素的大小缩放。