CSS Sprite 雪碧图制作

时间:2022-11-21 23:55:12

CSS Sprite 雪碧图,简单来说就是:

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

CSS Sprite 雪碧图制作

 

一个例子,可以复制然后看一下效果:

 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信息,可直接使用,很方便。

 CSS Sprite 雪碧图制作 

以下是最终效果图:

CSS Sprite 雪碧图制作

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

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