图片占位符插件holder.js用法详解

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、带边框与交叉线：