css3精灵图

最新推荐文章于 2023-07-26 21:50:45 发布

bearWeb

最新推荐文章于 2023-07-26 21:50:45 发布

阅读量373

点赞数 1

分类专栏： Web 文章标签： css3 css

本文链接：https://blog.youkuaiyun.com/weixin_45090657/article/details/123445544

版权

Web 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何使用Firework软件加载精灵图，关键步骤包括锁定图层调整尺寸、切割特定区域（23px x 23px，坐标59, 194），并将其添加到CSS代码中，通过background-position精确控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.下载firework
在这里插入图片描述
2.在firework打开精灵图

要先锁住再改宽，否则精灵图会变形

3.切割所需要的图
在这里插入图片描述
图片宽/高为23px，x坐标59，y坐标194

4.添加到css代码中


.user::before{
    content: "";
    display: block;/*行元素无大小，需改为块*/
    /*图片的宽高*/
    width: 23px;
    height: 23px;
    /*关键代码*/
    background:url(../images/sprite.png) no-repeat -59px -194px;
    /* 缩放 */
    background-size: 104px auto;
    margin: 4px auto 0;
}