为什么背景图像会随此标记缩放？

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是1/24的2624.单元格13,7中的图像是骆驼。

我的标记是：

<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小提琴位于https://jsfiddle.net/5j5ahhda/，输出为：

我对第二个DIV的理解是，我正在将一个2624像素的图像压缩成64像素的正方形，其大小的1/41，然后将其向上吹41次，从而产生与图像相同的图像。原始尺寸。这种理解是否正确？

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

我想要的是原始图像尺寸的24/64。有更简单的方法吗？

Answer 1

  

我对第二个DIV的理解是，我正在将一个2624像素的图像压缩成64像素的正方形，其大小的1/41，然后将其向上吹41次，从而产生与图像相同的图像。原始尺寸。这种理解是否正确？

是

  

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

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