这里把一张图分割成几个矩形显示，请问有什么方法可以做到？
我现在想到一种方法是：画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-Frontend] Node.js-Schnellstart](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 设置图片背景的位置