.my-sprite {
background-image: url("/image/lJpW8.png");
height: 100px;
width: 100px;
background-position: 0 0;
background-position: -200px 0px;
}
<div class="my-sprite"></div>
我无法让 Sprite 缩放到更小的尺寸。我希望它是实际大小的一半,即 100x100px 如何使用 background-size
属性对其进行缩放?现在它只显示 100x100px 的完整图像大小......
最佳答案
您的图像 Sprite 的尺寸为 500x400,因此如果您想在 background-size
上减少 2,请定义这个尺寸的一半,然后调整 background-position
以获得你想要的任何图标:
.my-sprite {
background-image: url("/image/lJpW8.png");
height:50px;
width:50px;
background-position:150px 0px;
background-size:250px 200px;
border:1px solid;
}
<div class="my-sprite"></div>
你可以减少任何比例数字,你只需要做正确的计算
.my-sprite {
background-image: url("/image/lJpW8.png");
height:calc(100px / 5);
width:calc(100px / 5);
background-position:calc(3/5 * 100px) 0px;
background-size:calc(500px / 5) calc(400px / 5);
border:1px solid;
}
<div class="my-sprite"></div>
这是一个通用公式,使用 CSS 变量作为刻度数字和选择图标。
.my-sprite {
--n:1; /* scaling factor */
/* coordinates of the image */
--i:3;
--j:0;
display:inline-block;
background-image: url("/image/lJpW8.png");
height:calc(100px / var(--n));
width:calc(100px / var(--n));
background-position:calc(var(--i)/var(--n) * 100px) calc(var(--j)/var(--n) * 100px);
background-size:calc(500px / var(--n)) calc(400px / var(--n));
border:1px solid;
}
<div class="my-sprite"></div>
<div class="my-sprite" style="--n:2;--i:2;--j:2"></div>
<div class="my-sprite" style="--n:3;--i:4;--j:1"></div>
<div class="my-sprite" style="--n:4;--i:1"></div>
<div class="my-sprite" style="--n:5;--j:3"></div>
<div class="my-sprite" style="--n:0.5"></div>
<div class="my-sprite" style="--n:0.8"></div>
关于css - 用作背景图像时如何缩放 CSS Sprite ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50301190/