cssSprite CSS精灵的使用

CSS精灵

是优化界面的一种方法：将一些小图标整合到一张图上
cssSprite CSS精灵的使用

使用

将css代码复制到html文件的style标签中，.img就是生成的雪碧图，（注意在使用时看路径是否正确，其他不需要修改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
.img{background:url(img.png)  no-repeat;}
.al08{height:32px;width:32px;background-position:0 0;}
.al05{height:32px;width:32px;background-position:-32px 0;}
.al10{height:32px;width:32px;background-position:-64px 0;}
.al09{height:32px;width:32px;background-position:-96px 0;}
.al03{height:32px;width:32px;background-position:-128px 0;}
.al02{height:32px;width:32px;background-position:-160px 0;}
.al01{height:32px;width:32px;background-position:-192px 0;}
.al04{height:32px;width:32px;background-position:-224px 0;}
.al07{height:32px;width:37px;background-position:-256px 0;}
.al06{height:32px;width:37px;background-position:-293px 0;}
div{
    float: left;
    margin: 10px;
    width: 40px;
}
</style>
<body>
    <div class="img al01"></div>
    <div class="img al02"></div>
    <div class="img al03"></div>
    <div class="img al04"></div>
    <div class="img al05"></div>
    <div class="img al06"></div>
</body>
</html>

在要使用图标背景的标签中写class名：第一个是背景图class名，第二个是你想使用的图标的class名

<div class="img al06"></div>

效果：

cssSprite CSS精灵的使用