CSS精灵(CSS雪碧技术)

小编简短的补充一下CSS精灵(也叫CSS雪碧技术)

在实战中非常使用,使用也多我们不能遗漏。

在一些站中我们经常能看到:(已放入fireworks)

这是京东的小图标的一个原图,当然我们在使用这些小图标时不可能是一个一个很小的图,一般都是小图标的一些集合然后在插图时以定位方式截取自己所需要的部分。

那么实际操作非常简单

我们将图片放入fireworks时将自己所需要的部分切片切出来读出宽高,切完后值得我们注意的是这个坐标

插入小图标时我们都是以背景图进行插入

将盒子高度宽度定义成“精灵”高宽。

那么在操作上我们在background属性里加上这个大图后然后,给一个no repeat 然后给一个-149px -98px 的坐标定位这样我们就能实现精确定位到所需图片。

很简单但非常实用需要掌握的一个知识点。

猜你喜欢

转载自blog.csdn.net/qq_40833779/article/details/82747748