为什么背景图像会随着这个标记而缩放？

我的风格定义是：上述为什么背景图像会随着这个标记而缩放？

<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中的图像是骆驼。

我的标记是：

<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的理解是，我挤2624px图像转换成一个64像素的正方形，其大小的1/41，然后吹了41次，从而产生与原始尺寸相同的图像。这种理解是否正确？

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

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

来源

2016-12-02 Old Geezer

为什么要将背景大小扩展到4100％？大小是div的宽度和高度。 – Gabbax0r

如果我没有缩放，背景图像是原始大小，这不是我想要的。我希望背景是原始图像文件的24/64。 –

background-size：4100％表示4100％的div尺寸...不是imgs尺寸。 –

我的第二DIV的理解是，我挤2624px图像划分为64像素正方形，1 /它的尺寸的第41，然后吹起来的41倍，从而导致图像中的原来一样尺寸。这种理解是否正确？

是的。

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

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

来源

2017-02-04 11:07:49 BoltClock

为什么背景图像会随着这个标记而缩放？

回答

相关问题