我有一个我正在使用的精灵，我想重复使用精灵中的一个图像，但只有一半大小，所以我想如果我只使用background-size:50%;，它会将背景调整50％，但由于某种原因它似乎只有四分之一：
.test {
background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
width: 112px;
height: 112px;
border: 1px solid red;
}
.test.half-size {
width: 56px;
height: 56px;
background-size: 50%;
}<div class="test"></div>
<div class="test half-size"></div>
现在我可以通过将背景大小设置为113％来解决这个问题：
.test {
background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
width: 112px;
height: 112px;
border: 1px solid red;
}
.test.half-size {
width: 56px;
height: 56px;
background-size: 113%;
}<div class="test"></div>
<div class="test half-size"></div>
但是，当图像小于原始图像时，为什么background-size大于100％？
在确定如何调整精灵大小时，我可以应用一组计算吗？
答案 0 :(得分：4)
经过大量的精灵玩法后，我得出的结论是，精灵的宽度除以精灵部分的宽度，乘以100的时间会给你x轴的背景大小百分比，然后做与y轴背景大小的高度相同。
所以在我的情况下得到x百分比，它是
( 126px / 112px ) * 100 = 112.5%
Full width of sprite width of sprite part
并获得y百分比
( 112px / 112px ) * 100 = 100%
Full height of sprite height of sprite part
这意味着background-size: 112.5% 100%适用于具有该精灵的任何方格div：
.test {
background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
width: 112px;
height: 112px;
background-size: 112.5% 100%;
border: 1px solid red;
}
.test.half-size {
width: 56px;
height: 56px;
}
.test.random-size {
width: 90px;
height: 90px;
}<div class="test"></div>
<div class="test half-size"></div>
<div class="test random-size"></div>
答案 1 :(得分：2)
根据W3C Specs：
百分比是相对于 背景定位区域 。
和background positioning area是基于border-box属性的padding-box或content-box或background-origin之一。您尚未明确为此指定任何值，因此使用其默认值padding-box。此元素没有填充，因此它等于content-box。
你的图像是126 x 112像素，但元素的宽度和高度是56 x 56像素，因此background-size: 100%（推断为100% auto）意味着图像按比例缩小，直到它有宽度为56px。现在到达56px，宽度按照图像原始大小的44.44％缩小。因此， 保留宽高比 （因为一个值为自动），图片的 高度 为 也缩小 至44.44％，即49.78px（或大约50px）。正如您所看到的，计算出的背景图像的尺寸为56px x 50px（而不是56px x 56px），因此它不会完全覆盖盒子。您可以在下面的代码段中清楚地看到这一点。
.test {
background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
width: 56px;
height: 56px;
border: 1px solid red;
background-size: 56px 50px; /* see how this is same as 100% or 100% auto */
}
.test.t2 {
width: 56px;
height: 56px;
background-size: 100%;
}
.test.t3 {
width: 56px;
height: 56px;
background-size: 100% auto;
}<div class="test"></div>
<div class="test t2"></div>
<div class="test t3"></div>
注意： 56px宽度包含圆圈右侧的空白区域，因此即使它覆盖了整个宽度元素，你仍然会看到差距。这是因为图像本身有空格。
现在，当您设置background-size: 50%（= 50% auto）时，这意味着图片的最大宽度可以为28px，因此缩小了22.22％。这意味着高度也缩小了22.22％，大致为25px。这就是为什么你认为它是 几乎 四分之一大小（但不完全是四分之一）。这可以在下面的片段中直观地看到：
.test {
background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
width: 56px;
height: 56px;
border: 1px solid red;
background-size: 28px 25px; /* again see how they are same */
}
.test.t2 {
width: 56px;
height: 56px;
background-size: 50%;
}
.test.t3 {
width: 56px;
height: 56px;
background-size: 50% auto;
}<div class="test"></div>
<div class="test t2"></div>
<div class="test t3"></div>
当我们设置background-size: 113%时，表示 宽度可以是容器宽度 的最大113％，即{} {1}}这大约是原始图像宽度的50％。由于宽度按原始图像缩小63.28px， 其高度也按比例缩小 ，因此结果值为50% （这只是元素的高度，所以它垂直覆盖盒子）。现在，由于您还将56px作为background-position，因此图像相对于容器的左边缘放置，因此存在于右侧的白色空间图像（另一个left-top）是不可见的，因为框不会显示任何超过其宽度的内容。
您已经回答了问题的第二部分，所以我没有再重复过来。
对于未来的读者：对于OP的情况，可能无法摆脱空格，因为它是精灵的一部分，但如果你的情况不同而且你可以摆脱那些最好的空间。
如果右侧的空白区域被移除并且图像被裁剪为其实际大小（即112 x 112px），则只需设置7.28px（或甚至background-size: 100% 100%）足够。当设置为原件尺寸的一半或四分之一（或任何尺寸）时，容器元素的尺寸将自动为我们进行缩放。
100% auto.test {
background: url(https://i.stack.imgur.com/UaCct.png) left top no-repeat;
width: 112px;
height: 112px;
background-size: 100% 100%;
border: 1px solid red;
}
.test.half-size {
width: 56px;
height: 56px;
}
.test.quarter-size {
width: 28px;
height: 28px;
}