今天學習響應式的時候看見了圖片占位生成器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參數修改成任意文字。如果需要換行，就在換行處輸入\n，注意\n的兩邊各需要一個空格。
<img src="holder.js/300x200?text=這是一張圖片 \n 大小固定">
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的用法了，不過我覺得還是基礎的用法最重要。