制作CSS sprite图片

顺晟科技

2022-09-13 13:52:01

135

制作简单的CSS雪碧图，CSS sprite

CSS Sprite 雪碧图，简单来说就是：

为了提高网页的性能，减少加载次数，将一些不会经常随网站内容变化的小图标，集中放在一张大图上，将该图应作为background-image 嵌入页面中，在需要相关图标时，根据background-position设置坐标值，达到目的。

一个例子，可以复制然后看一下效果：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sprite</title>
    <link rel="stylesheet" href="css-sprite.css">
</head>
<body>
<div class="container">
    <ul class="menu">
        <li class="cat-1">
            <i></i>
            <h3><a href="#">项目一</a></h3>
        </li>
        <li class="cat-2">
            <i > </i>
            <h3><a href="#">项目二</a></h3>
        </li>
        <li class="cat-3">
            <i></i>
            <h3><a href="#">项目三</a></h3>
        </li>
        <li class="cat-4">
        <i></i>
        <h3><a href="#">项目四</a></h3>
    </li>
        <li class="cat-5">
        <i></i>
        <h3><a href="#">项目五</a></h3>
    </li>
        <li class="cat-6">
        <i></i>
        <h3><a href="#">项目六</a></h3>
    </li>
        <li class="cat-7">
        <i></i>
        <h3><a href="#">项目七</a></h3>
    </li>
        <li class="cat-8">
        <i></i>
        <h3><a href="#">项目八</a></h3>
    </li>
        <li class="cat-9">
        <i></i>
        <h3><a href="#">项目九</a></h3>
    </li>
        <li  class="cat-10" >
        <i></i>
        <h3><a  href="#">项目十</a></h3>
    </li>
    </ul>
</div>

</body>
</html>

CSS代码：

/*
通用设置
*/
.container, .menu {
    margin:0;
    padding:0;
    line-height: 0;
}

a:link, a:visited {
    text-decoration: none;
    color: inherit;
}
a:hover {
    color: orangered;
}
/*
格式设置
*/

.menu {
    width: 120px;
    list-style-type: none;
    border: 1px solid #ccc;
}

.menu li {
    display: block;
    height: 31px;
    line-height: 31px;
}
li h3 {
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid #eee;
}

li i {
    background: url("img/sprite.png");
    display: inline-block;
    float: left;
    width: 24px;
    height: 24px;
    margin: 0 15px 5px;
}

.cat-1 i{
    background-position: 0 0;
}
.cat-2 i {
    background-position: 0 -26px;
}

.cat-3 i{
    background-position: 0 -52px;
}
.cat-4 i {
    background-position: 0 -78px;
}

.cat-5 i{
    background-position: 0 -104px;
}
.cat-6 i {
    background-position: 0 -130px;
}

.cat-7 i{
    background-position: 0 -156px;
}
.cat-8 i {
    background-position: 0 -182px;
}

.cat-9 i{
    background-position: 0 -208px;
}
.cat-10 i {
    background-position: 0 -236px;
}

这是利用一个雪碧图在线制作工具制作的图，工具链接：http://lazytools.sinaapp.com/。其他工具不清楚，但是该工具最后会生成图标对应的位置CSS信息，可直接使用，很方便。

以下是最终效果图：

总结：对于新手而言，学习一个新知识点，应该多练习，自己写代码，光看光听是不起作用的，看视频的时候觉得都会，实际操作时会出各种问题，多练习也是不断进步的最佳途径。

不知道你是否懂得如何制作和运用雪碧图，反正现在我是会了，呵呵。

上一篇：HTMLCSS基础-汽水地图的制作和下一篇：用纯CSS3绘制萌系漫画人物动态头像

网站建设

Css

制作CSS sprite图片