84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
这里把一张图分割成几个矩形显示，请问有什么方法可以做到？
我现在想到一种方法是：画5个p，每个p里面显示这张图片的一个区域，但是这样等于生成5个image对象，效率会不会很低，因为这个页面有可能有上百张这种图片的，每张图都这样弄，会不会导致页面很卡？
认证0级讲师
有没有可能是并没有裁剪图片，而是在图片之上加了几条白线
这样效率不会变低哈，因为引入的只是一张图片，只要src里面的路径是一样的就不会对浏览器造成额外的压力。
反而如果把一张图片切成5张，会因为加载数量过多导致效率降低。特别是图特别多的时候，加载压力会更大。
因此你的方案是很棒的方案。
这个时候canvas就可以有很好的解决了，用canvas进行截图，再分配给p,不过canvas不支持跨域图片哦。
用canvas可以做到，canvas有个裁剪方法
我有一个想法，先放一个大的p，设置它的背景图片为大的图片。然后里面放小的p，透明度为0，再border的宽度和颜色。不知道可不可以，有空可以试一下。
前几天看到一个库，跟楼主的需求有点类似Multiple.js
background-position即可，不过需要计算好，有很多动画效果就是这么实现的
background-position
尝试一下图片用做background 白线用broder 来试试吧，
只用p css的话，雪碧图啊，设置五个框，设置大小，算好距离，position 设置好
最好就是雪碧图吧，次就是上面覆盖白条
设置背景图然后 background-position 设置图片背景的位置
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
有没有可能是并没有裁剪图片，而是在图片之上加了几条白线
这样效率不会变低哈，因为引入的只是一张图片，只要src里面的路径是一样的就不会对浏览器造成额外的压力。
反而如果把一张图片切成5张，会因为加载数量过多导致效率降低。特别是图特别多的时候，加载压力会更大。
因此你的方案是很棒的方案。
这个时候canvas就可以有很好的解决了，用canvas进行截图，再分配给p,不过canvas不支持跨域图片哦。
用canvas可以做到，canvas有个裁剪方法
我有一个想法，先放一个大的p，设置它的背景图片为大的图片。
然后里面放小的p，透明度为0，再border的宽度和颜色。
不知道可不可以，有空可以试一下。
前几天看到一个库，跟楼主的需求有点类似
Multiple.js
background-position即可，不过需要计算好，有很多动画效果就是这么实现的尝试一下图片用做background 白线用broder 来试试吧，
只用p css的话，雪碧图啊，设置五个框，设置大小，算好距离，position 设置好
最好就是雪碧图吧，次就是上面覆盖白条
设置背景图然后 background-position 设置图片背景的位置