您现在的位置是:首页 > Javascript
当前栏目
css精灵图技术是什么
2023-03-15 23:16:45 时间
1、将页面所涉及的所有零星背景图像集中到大图中,然后将大图用于网页。用户访问页面时,只需向服务器发送一次请求。
2、直接使用background-position等属性来准确定位所需的背景部分。
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <span></span> <span></span> <span></span> </div> </body> <style> .box span { display: inline-block; } .j { background: url("abcd.jpg") no-repeat -389px -141px; width: 102px; height: 112px; } .w { background: url("abcd.jpg") no-repeat -117px -560px; width: 135px; height: 112px; } .t { background: url("abcd.jpg") no-repeat -368px -417px; width: 102px; height: 112px; } </style> </html>
以上就是css精灵图技术的介绍,希望对大家有所帮助。更多css学习指路:css教程
相关文章
- 浅探 Web Worker 与 JavaScript 沙箱
- 有意思!CSS 文字装饰还能这样玩~
- 部署和使用Anchore映像漏洞扫描器
- 12 个非常实用的 jQuery 代码片段
- 太透彻了:约瑟夫环的三种解法
- 推荐几款前端开发编辑器
- 前端开发者必备的12个工具
- 程序员写好技术文章的几点小技巧
- 用 Vue 开发自己的 Chrome 扩展
- 帮你精通JS:一段函数的进化史
- 深夜12点,头秃的那家伙,还在用CSS处理图片上的文字
- String 的不可变真的是因为 Final 吗?
- 2.2 万 Star!一个开源免费的 To-Do-List 应用!
- Javascript的对象拷贝
- JavaScript 函数劫持攻击原理
- SpringBoot整合RocketMQ入门示例
- 帮你精通JS:变量的声明,举起与初始化的问题
- 一篇文章带你了解CSS定位知识
- JavaScript 中如何实现并发控制?
- 一篇文章带你了解JavaScript弹出框