精灵图案例

html 复制代码
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item {
        width: 85px;
        height: 60px;
        background: url(./img/sprite.jpg) no-repeat -280px -240px;
      }
    </style>
  </head>
  <body>
    <div class="item"></div>
  </body>
</html>

```![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/46fa7a6a78274ad4981275484122a860.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/dcf94c1c342e44309a3482d734b59b39.jpeg#pic_center)
相关推荐
海上彼尚7 小时前
SVG矢量图形快速入门
前端·html5
嗷o嗷o7 小时前
Android App Functions 深入理解
前端
qq_20815408857 小时前
瑞树6代流程分析
javascript·python
UXbot7 小时前
AI原型设计工具评测:从创意到交互式Demo,5款产品全面解析
前端·ui·设计模式·ai·ai编程·原型模式
落魄江湖行7 小时前
硅基同事埋的坑,我用2小时才填平:Nuxt 4 路由踩坑:可选参数 [[id]] 与 [id] 的区别
前端
上海合宙LuatOS7 小时前
LuatOS扩展库API——【exremotecam】网络摄像头控制
开发语言·网络·物联网·lua·luatos
一勺菠萝丶7 小时前
管理后台使用手册在线预览与首次登录引导弹窗实现
java·前端·数据库
军军君017 小时前
Three.js基础功能学习十四:智能黑板实现实例一
前端·javascript·css·typescript·前端框架·threejs·智能黑板
feng_you_ying_li7 小时前
C++11,{}的初始化情况与左右值及其引用
开发语言·数据结构·c++
小村儿7 小时前
连载05-Claude Skill 不是抄模板:真正管用的 Skill,都是从实战里提炼出来的
前端·后端·ai编程