holder.js 可以幫我們快速生成佔位圖片，而且還能定義佔點陣圖片的一些基本樣式。

用法簡單，可以直接去官網下載，或直接引用Bootcss的CDN :

<script src="https://cdn.bootcss.com/holder/2.9.4/holder.js"></script>

1、基本：預設單位為px，用小寫的x連線圖片的寬高：

<img data-src="holder.js/200x100"/>

2、使用p代表%：

<img src="holder.js/100px200"/>

3、讓佔位圖片在縮放長寬比，可以加上auto引數：

<img src="holder.js/300x200?auto=yes">

4、配色方案：

holder.js共定義了6種佔位圖片配色，分別是：sky、vine、lava、gray、industrial、social

配色可以通過theme引數設定：

<img src="holder.js/300x200?theme=sky">

5、隨機配色：

<img data-src='holder.js/200x100?random=yes"/>

6、更多樣式定義：

  bg: "#000", // 背景色
  fg: "#aaa", // 前景色（字元顏色）
  size: 11, // 字元大小
  font: "Monaco", // 字型
  fontweight: "normal" // 字元粗細
  align: "left"//對齊
  lineWrap:"0.8"//行間距 

<img data-src="holder.js/200x200?bg=#000"/>

7、顯示文字：按行符\n兩邊要留空格

<img src="holder.js/300x200?text=圖片 \n 300x200">

8、帶邊框與交叉線：