当前位置： 移动技术网 > IT编程>开发语言>.net > 基础学习(关于精灵图比例缩小)

基础学习(关于精灵图比例缩小)

2020年07月14日  | 移动技术网IT编程  | 我要评论

我们需要在原精灵图的基础下做出比例缩小或放大，取决于一个属性：
background-size**
例如：有一张精灵图的像素是400×400，我们需要将它缩小1倍，那么可以用以下语句：

background: url(../images/splite.png) no-repeat -80px;
width: 15px;
height: 15px
background-size: 200px;

注意：-80px指缩小后精灵图中图标位置，原精灵图位置应为**-160px**，宽度高度亦是如此，这里是等比例缩小了！！！

附带说一句：
有时候用了background-size后，精灵图片会消失不见了，它并没有消失，只是你设的size值与原精灵图图片大小相差过多了，导致整个图片缩小了，里面的精灵图自然也就变得更小了，相当于不见了。

例如：原精灵图的像素为200*200，现在你给它一个background-size: 30px; 后，它相当于在原精灵图缩小200/30倍了，也就是变成了30×30的图片了，那么，里面的图标你怎么在屏幕上看得到呢？

本文地址：https://blog.csdn.net/qq_48784569/article/details/107295117

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网