极客观点
项目管理
HarmonyOS
如上图所示划红线的图标的图片路径是下面划红线的地址，然后打开后的图片是这样的，不知道是怎么选中这个大图中的一张图片作为图标的，是怎么处理的，实在是不知道啊
在一个页面中，可能这样的小图标要用到十几个~ 如果每个图标都是一个文件的话打开一个页面光是这些小图标就会产生十几个http请求。
而浏览器同时最多并发处理8个http请求（各浏览器差异见下图），分成多个文件就会使得页面加载速度超慢~
而网页优化的一条建议就是 减少http请求次数~
所以就把这些小图标合为一个文件了，在使用中的时候，计算每一个小图标的偏移位置，就能正确显示单个图标了~
不过这种计算方式显然比较复杂，如果页面里面只有一两个图标，也可以考虑不合并。
百度一下“图片精灵”或者“雪碧图”(css sprite)。这样将很多小的零散的图片拼在一起成一张大图片，页面加载时只需一个http请求就可以了。
前端还有很多canvas动画效果，也是通过这样的技术完成的（一张大图中包含了动画的所有帧）
实现如图中的效果，用W。doc的图片作为小图标
实现步骤：
1、用ps量出你图标的宽高
2、在css中给div的样式设置测量车的width和height
3、background：url("背景图片")
4、background-position:x y;//x:x方向的偏移量 y：y方向的偏移量
方法一：是用ps测量出x、y方向的偏移值；方法二：在浏览器中调试模式中调试偏移量是多少
一般是两者结合。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style>
.bg{
width:28px; //图标宽
height: 34px;//图标高
background: url(img/38694355-56c5a3ac80b93.png);//背景图片
background-position: 0 -112px;
}
</style>
</head>
<body>
<div class="bg">
</div>
</body>
</html>
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
扁平化数组转换成树形?
背景：需要将扁平化数组转换成树形数组。比如原始数组如下： {代码...} 期望转换后的数据 {代码...}8 回答4.6k 阅读✓ 已解决
省市区街道数据在哪里可以下载？
省市区街道数据在哪里可以下载？6 回答3.4k 阅读✓ 已解决
两个promise问题？
第一个问题，这个为什么先输出3后输出2呢 {代码...} 第二个问题，这个为什么会交错输出呢，142536 {代码...} promise小白一枚，上述两个疑问，希望能得到详细的解答5 回答2.8k 阅读✓ 已解决
Vue项目一个报错无法找到原因?
排查了好久实在没有找到哪儿出了问题，时不时弹出来，编译结果又是正常的，尝试排查了好久但是一直没有办法排查出来，有遇到过这种报错的同学吗？或者有没有同学提供一种排查思路，因为我真的搞懵逼了。哈哈哈。5 回答6.3k 阅读✓ 已解决
如何在JavaScript中从外部中断for循环的执行？
js中如何从外部中断for循环，起因是这段代码上层会反复进入这个for循环，每次进入的时候需要清除之前的执行效果，所以需要在循环外部来取消？大佬们知道如何做吗？4 回答2.2k 阅读✓ 已解决
如何自定义设置虚线边框的样式？
背景： {代码...} 如上图所示：虽然可以设置虚线边框，但是虚线边框的样式往往需要修改：比如:单个实线间的间距自定义调整;单个实线的长度自定义调整。5 回答1.3k 阅读✓ 已解决
Quartz如何根据cron表达式计算任务开始前发送通知的时间？
任务调度任务的执行时间是cron表达式，使用quartz定时器生成任务现在需要在每次任务开始前一定时间（例：1天、一周、15分钟）发送通知在不改前端的情况下。有什么好的做法实现吗。计算通知的cron，有点过于复杂，也没有找到工具可以使用4 回答2.8k 阅读✓ 已解决
宣传栏
定义背景图偏移量