根据
W3C Specs：
A percentage is relative to the background positioning area.
和background positioning area是基于background-origin属性的border-box或padding-box或content-box之一.这里没有为此明确指定任何值,因此使用其默认值padding-box.此元素没有填充,因此它等于content-box.
您的图像为126 x 112像素,但元素的宽度和高度为56 x 56像素,因此背景大小：100％(推断为100％自动)意味着图像按比例缩小,直到宽度为56像素.现在要达到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;
}
注意：56px宽度包括圆圈右侧的白色空间,因此即使它覆盖了元素的整个宽度,您仍然会看到间隙.这是由于图像本身具有空间.
现在,当你设置背景大小：50％(= 50％自动)时,它意味着图像的最大宽度可以是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;
}
当我们设置背景大小：113％时,这意味着宽度可以是容器宽度的最大值的113％,即63.28px,这大约是原始图像宽度的50％.由于宽度从原始图像缩小了50％,因此其高度也按比例缩小,因此得到的值为56px(这只是元素的高度,因此它垂直覆盖了框).现在,由于您还将背景位置设置为左上角,因此图像相对于容器的左边缘放置,因此位于图像右侧的白色空间(另一个是7.28) px)是不可见的,因为框不会显示任何超过其宽度的内容.
你已经回答了问题的第二部分,所以我不会再讨论它了.
对于未来的读者：对于OP的情况,可能无法摆脱白空间,因为它是精灵的一部分,但如果你的情况不同,你可以摆脱空间,那么这是最好的.
如果右侧的白色空间被移除并且图像被裁剪为其实际尺寸(即112 x 112px),那么仅设置背景尺寸：100％100％(甚至100％自动)就足够了.当设置为原始尺寸的一半或四分之一(或任何)尺寸时,容器元素的尺寸将自动为我们进行缩放.
.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;
}