• 欢迎光临~

CSS笔记 - 08 雪碧图

开发技术 开发技术 2022-10-12 次浏览

8. 雪碧图

  • 定义和原理:将多个小图片统一保存到大图片中,然后通过调整background-position来显示响应的图片,这样就能解决因加载延迟带来的图片闪烁问题

  • 使用步骤

    1. 先确定要使用的图标
    2. 测量图标的大小
    3. 根据测量结果创建一个元素
    4. 将雪碧图设置为元素的背景图片
    5. 设置一个偏移量以显示正确的图片
    a:link{
        display : block;
        width: 93px;
        height: 29px;
        background: url("背景.png");
        background-position: 0 0;
    }
    
    a:hover{
        background-position: -93px 0;
    }
    
    a:active{
        background-position: -186px 0;
    }
    
程序员灯塔
转载请注明原文链接:CSS笔记 - 08 雪碧图
喜欢 (0)