fis3 精灵图制作

最新推荐文章于 2025-03-28 18:19:16 发布

原创最新推荐文章于 2025-03-28 18:19:16 发布 · 707 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#图片 #合并 #性能

fis 专栏收录该内容

0 篇文章

订阅专栏

为什么要使用精灵图？
为了合并http请求，提高网页性能。
我们都知道，每个图片的加载都需要发送一次http请求，一般采取的方式是将多个图片合并为一张图片，再通过css定位来显示所需图片，采用fis-spriter-csssprites插件可以自动构建定位代码，使开发变得更加方便。

在fis中制作精灵图分成三步
1 找到需要制作精灵的图片。在图片路径后面加上?__sprite
2 找到需要处理的css文件，配置useSprite属性值true
3 在打包阶段，引入制作精灵图的插件
该阶段是::package
引入插件 fis-spriter-csssprites
阶段 spriter
名称 csssprites

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
 <ul>
     <li>
         <span class="item-1"></span>
         <p>机票</p>
     </li>
     <li>
         <span class="item-2"></span>
         <p>酒店</p>
     </li>
     <li>
         <span class="item-3"></span>
         <p>数娱</p>
     </li>
 </ul>
</body>
</html>

index.css

*{
    margin: 0;
    padding:0;
    list-style: none;
}

ul{
    width: 200px;
    height: 80px;
    margin: 100px auto;
}

ul li{
    width: 60px;
    height: 55px;
    padding-top: 5px;
    float: left;
    border: 3px solid silver;
    text-align: center;
}

ul li:hover{
    opacity: 0.5;
}

ul li span{
    width: 40px;
    height: 30px;
    display: inline-block;
    background-repeat: no-repeat;
}

ul li p{
    font-size: 12px;
}

/* 第一步  在图片路径后面添加?__sprite */
/* 开发是只需要直接引入图片即可，不需要设置background-position属性，是不是很方便*/
.item-1{
    background-image: url("../images/index_homeh.png?__sprite");
}
.item-2{
    background-image: url("../images/index_img1h.png?__sprite");
}
.item-3{
    background-image: url("../images/index_img2h.png?__sprite");
}

fis-conf.js

// 第二步 找到所有css文件
fis.match('**.css',
    {
        useSprite:true
    }
)

// 第三步 打包阶段使用精灵图插件
fis.match('::package', {
    spriter: 'csssprites'})

使用fis发布命令进行发布：fis3 release -d ../demorelease

可以在demorelease目录下发现发布的代码
同时看到demorelease/css目录下生成了一个index_z.png的图片，包含刚才我们引入的三张小图片。

demorelease/css/index.css代码中的图片引入样式也变为如下代码

/* 第一步  在图片路径后面添加?__sprite */
.item-1{background-repeat: no-repeat;}
.item-2{background-repeat: no-repeat;}
.item-3{background-repeat: no-repeat;}

/* 此处自动设置background-position属性，自动引入制作好的精灵图*/
.item-1{background-position:0px 0px}
.item-2{background-position:0px -38px}
.item-3{background-position:-2px -73px}
.item-1,.item-2,.item-3{background-image: url(/css/index_z.png)}