【雪碧图横着做的，为什么直接使用雪碧图位置放大会变形。 _属性 _属性 _属性 _属性】

雪碧图横着做的，为什么直接使用雪碧图位置放大会变形。

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(3)

属性属性属性属性

详细描述

截图

代码

.killer {
    width: 15px;
    height: 18px;
    background: url(../img/css_sprites.png) no-repeat 0 0;
}

judge {
    width: 4.5vw;
    height: 4.5vw;
    background: url(../img/css_sprites.png) no-repeat -15px 0;
}

编辑于2024-05-07

时间排序

热门排序

[上海|荣耀师兄]JS-周能
1

雪碧图的小图标这个任务的话是要根据屏幕的缩放而缩放的，这里的话使用vw来做，先给雪碧图一个盒子，用vw做单位，然后雪碧图的background-position属性使用百分比，列如第一张图background: url(../../) no-repeat 0 0/100%;第二张图background: url(../../) no-repeat 0 30%/100%，这样就实现了雪碧图图标的缩放，还有一种方式就是使用background-size的属性cover来实现，cover的属性是纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小，因为盒子的单位使用的是vw单位，会随视窗的缩放而缩放，所有cover属性会把图片完全覆盖，也就跟着盒子缩放了，例如第一张小图标background: url(../../) no-repeat 0 0/cover，这样也可以实现缩放

查看全部>

编辑于2019-01-04
[武汉|结业弟子]PM-陈凯
0

通常情况下，每个装图片的盒子的background要分开给，出现种种情况是因为你对雪碧图的原理可能还不太完全理解，记住一个关键点，背景图的大小也要随着盒子大小的改变而改变。

查看全部>

编辑于2019-07-27
[真传弟子]JS-赵立鼐
0

transform + rem

查看全部>

编辑于2019-11-13

去第页