欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-19 14:18:18
我们需要在原精灵图的基础下做出比例缩小或放大,取决于一个属性:background-size**例如:有一张精灵图的像素是400*400,我们需要将它缩小1倍,那么可以用以下语句:background: url(../images/splite.png) no-repeat -80px;width: 15px;height: 15pxbackground-size: 200px;注意:-80px指缩小后精灵图中图标位置,原精灵图位置应为**-160px**,宽度高度亦是如此,这里是等比例缩小...

我们需要在原精灵图的基础下做出比例缩小或放大,取决于一个属性:
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