CSS Sprite 雪碧圖製做

時間 2019-11-08

標籤 css sprite 雪碧圖制欄目 CSS 简体版

原文原文鏈接

CSS Sprite 雪碧圖，簡單來講就是：css

爲了提升網頁的性能，減小加載次數，將一些不會常常隨網站內容變化的小圖標，集中放在一張大圖上，將該圖應做爲background-image 嵌入頁面中，在須要相關圖標時，根據background-position設置座標值，達到目的。html

一個例子，能夠複製而後看一下效果：app

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;
}