这里把一张图分割成几个矩形显示，请问有什么方法可以做到？
我现在想到一种方法是：画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 設定圖片背景的位置
有沒有可能是並沒有裁剪圖片，而是在圖片之上加了幾條白線
這樣效率不會變低哈，因為引入的只是一張圖片，只要src裡面的路徑是一樣的就不會對瀏覽器造成額外的壓力。
反而如果把一張圖片切成5張，會因為載入數量過多導致效率降低。特別是圖特別多的時候，載入壓力會更大。
因此你的方案是很棒的方案。
這時候canvas就可以有很好的解決了，用canvas進行截圖，再分配給p,不過canvas不支援跨域圖片哦。
用canvas可以做到，canvas有個裁切方式
我有一個想法，先放一個大的p，設定它的背景圖片為大的圖片。
然後裡面放小的p，透明度為0，再border的寬度和顏色。
不知道可不可以，有空可以試試看。
前幾天看到一個庫，跟樓主的需求有點類似
Multiple.js
background-position即可，不過需要計算好，有很多動畫效果就是這麼實現的試試看圖片用做background 白線用broder 來試試吧，
只用p css的話，雪碧圖啊，設定五個框，設定大小，算好距離，position 設定好
最好就是雪碧圖吧，次就是上面覆蓋白條
設定背景圖然後 background-position 設定圖片背景的位置