html精灵图不能用backgroundsize调整大小吗

html精灵图不能用backgroundsize调整大小吗,第1张

html精灵图能用backgroundsize调整大小。需要使用精灵图的核心代码,为sprites里的span元素设置背景图像,引用精灵图为背景图像调整尺寸大小,使得sprites盒子的span元素的背景图像固定为宽(60px),高(40px),设置或检索sprites盒子的span元素的背景图像位置。必须先指定background-image属性才可使用。

在我们进行网页布局的时候经常会遇到以下的情况

一排或多排文字上/下/左/右会有对应的小图标或图片,比如下图,

下面是我已经做好的一张精灵图

然后在less中写出样式

其中 background-image:是引入你做好的精灵图,找到相应路径,把图片引进来就行

background-size: 是图片尺寸的意思,也就是调节图片大小,一般都会把它的属性设为 cover

background-position:是背景图片定位,就是把图片定到你想要的位置,后面跟单位像素值来调节,第一个代表x轴方向(水平方向),第二个代表y轴方向(垂直方向)

剩下就是调整background-position的数值了,需要分别把每个li元素下面的i标签都重新调整一下,因为每个图的宽度都不一样,要顾及到整个盒子的宽度问题,要能放的下这些图,所以每个i标签的宽度也需要重新调整一下

这样的话可以算是做好了,看下做好的效果是什么样子

怎么样,是不是效果还不错,如果觉得还行的话就点个赞呗!!!

本人学识有限 文章多有不足

若有错误 请大方指出 以免误导他人 谢谢!!!


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7057094.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存