CSS精灵图标使用技巧

it2023-06-19  65

CSS精灵图标使用技巧

二倍精灵图做法

在firework里面把精灵图等比例缩放为原来的一半之后根据大小测量坐标注意代码里面background-size也要写:精灵图原来宽度的一半

举例(京东移动首页放大镜的使用)

.icon_search{ position: absolute; top: 8px; left: 50px; width: 18px; height: 15px; background: url(../img/jd-sprites.png) no-repeat -81px 0; background-size: 200px; }

使用技巧-抽取公用样式

1、公共样式

[class^="icon_"]{ width: 18px; height: 15px; background: url((../img/jd-sprites.png) no-repeat; background-size: 200px 200px; }

2、具体图标

.icon_search{ background-position: -81px 0; }
最新回复(0)