今天学习响应式的时候看见了图片占位生成器holder.js，所以来记录一下：
我们在网页设计时会需要一些图片来占位，但是去搜索使用合适尺寸的图片浪费时间，这时候就需要holder.js来自动生成占位图片，还可以定义一些图片的基本样式，方便快捷。
holder.js生成图片使用的是SVG技术，不依赖jQuery等第三方库。
下载地址：
官网下载地址：http://www.bootcdn.cn/holder/
基本用法：
1.在HTML中引入holder.js文件
可以直接下载到本地使用，也可以直接使用Bootcss的CDN :
<script src="js/holder.js"></script>
或者
<script src="https://cdn.bootcss.com/holder/2.9.4/holder.js"></script>
2.在img标签中使用
修改img标签的src属性或者data-src属性设置为holder.js，然后加图片的尺寸，宽乘以高，两者使用“/”隔开。
<img src="holder.js/300x500" alt="300x500">
显示如下图所示：
注意：(1) 尺寸中x不是乘号，而是小写字母x。
(2) 尺寸的默认单位是像素。
3.在指定区域使用，
在id为test的区域显示占位图片，图片的尺寸是占满整个元素，同时定义了新的主题配色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>holder.js学习</title> <script src="holder.js"></script> <style> div{ width: 100%; height:200px; } </style> </head> <body> <div id="test"> </div> </body> <script> Holder.addTheme("new",{ fg:"#fff",//前景色 bg:"#c3c0c0",//背景色 size:10 //字符大小 }).addImage("holder.js/100px200?theme=new","#test").run(); </script> </html>
控制占位图片的尺寸：
holder.js中的图片尺寸默认单位是像素，也可以使用百分比为单位，这样占位图片可以根据父节点的尺寸自动缩放。
固定宽高尺寸的占位图片：宽度为300px 高度为100px的占位图片
<img src="holder.js/300x100" alt="300x100">
宽度按百分比定义的占位图片：宽度是占父元素的100%，但是高度是固定的200像素。
注意：这里的百分比不使用%而是使用字母p
<img src="holder.js/100px200"/>
占位图片缩放宽高比，可以加上auto参数：
<img src="holder.js/300x200?auto=yes">
调整占位图片的样式：
holder.js生成图片的默认颜色是浅灰色，holder.js一共定义了6中图片配色，分别为：sky、vine、lava、gray(#eee)、industiral、social。
颜色可以通过theme参数修改：比如
<img src="holder.js/300x200?theme=sky">
占位图片的样式还可以自定义，一下是各种可以自定义的参数：
theme:主题,改变图片的颜色。 例如:holder.js/300x200?theme=lava
random:使用随机主题，图片的颜色是随机产生的，每次刷新图片颜色会改变。 例如:holder.js/300x200?random=yes
outline: //画出图片轮廓和对角线的占位符。如下图：例如:holder.js/300x200?outline=yes
lineWrap: //最大线长度宽度比形象。例如:holder.js/300x200?lineWrap=0.5 ************************************************************************* bg: "#eee", //背景颜色 holder.js/300x200?bg=#2a2025 fg: "#999", //字体颜色 holder.js/300x200?fg=#ffffff text: 文本, //图片上显示的文本，holder.js/300x200?text=Hello
占位图片的正中默认显示该图片的尺寸，可以通过text参数修改成任意文字。如果需要换行，就在换行处输入，注意的两边各需要一个空格。
<img src="holder.js/300x200?text=这是一张图片 大小固定">
size: 20, //字号 holder.js/300x200?text=HELLO
font: "微软雅黑", //字体
fontweight: "400", //字体加粗程度，
自定义图片皮肤：
语法：Holder.addTheme("皮肤名字",{各种参数对象})；
自定义皮肤示例：
Holder.addTheme("diy", {
bg: "#ccc",
fg: "#fff",
size: 20,
font: "微软雅黑",
fontweight: "400",
outline:"yes"
});
在img标签中
<img src="holder.js/300x200?theme=diy">
以上就是了解到的关于holder.js的用法了，不过我觉得还是基础的用法最重要。