【任务七雪碧图调好位置之后无法调节大小 _雪碧图】

任务七雪碧图调好位置之后无法调节大小

我也踩过这个坑( 1 )

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

回答(2)

雪碧图

详细描述

截图

代码

.k{
    background: url(../img/task7-2.11.png) no-repeat;
    background-size: 20vw 5vw;
    display: inline-block;

}
.k1{
    height: 5vw;
    width: 5vw;
    background-position: 0 0;
}
.k2{
    height: 5vw;
    width: 5vw;
    background-position: -5vw 0;
}
.k3{
    height: 5vw;
    width: 5vw;
    background-position: -10vw 0;
}
.k4{
    height: 5vw;
    width: 5vw;
    background-position: -15vw 0;
}

编辑于2024-11-24

时间排序

热门排序

[深圳|结业弟子]JS-钟俊
1
首先你的黄色盒子下的四个图标如果用雪碧图来写的话，应该是分开来写的；
这样也比较方便调整，其次每个图标应该附上其URL，以及它在雪碧图上的位置；
如下：
```
.k1 {
    width: 5vw;
    height: 5vw;
    background: url(../img/task7-2.11.png)  10px -10px;
    zoom: 0.5 ;
}
```
这里的“ 10px -10px " 指的是你的小图标在整个雪碧图上的位置，这里只是举个例子
按你的实际情况为准；
然后如果你还想调整雪碧图的大小的话，可以使用zoom属性，上面 0.5
就是指按50%比例缩小；

除了zoom属性外，还可以使用transform属性调整大小，只需用它将zoom替换即可；
zoom与transfrom：scale还存在一些区别，可以稍微了解一下：
zoom的缩放是相对于左上角的；而scale默认是居中缩放；
zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
zoom和scale对元素的渲染计算方法可能有差异（需要自己动手，用高清图，仔细去看其中的区别）。
查看全部>
编辑于2018-09-07
[成都|]JS-
0

使用transform：scale（），可以对雪碧图进行缩放

查看全部>

编辑于2018-11-29

去第页