1、在html <header> 內引用holder.js CDN:
<script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
2、新增 img 標籤並把src屬性設置成holder.js,並附上圖片的尺寸就可自動生成基本圖片:
<img src="holder.js/500x250">
3、也可以用百分比取代寬高,以適應RWD,百分比要寫p
不是%
:
<img src="holder.js/100px200">
4、如需讓占位圖在縮放時,依然保持固定的長寬比,可以加上auto
參數:
<img src="holder.js/300x200?auto=yes">
5、調整顏色:參數sky
、vine
、lava
、gray
、industiral
、social
<img src="holder.js/500x250?auto=yes&theme=vine">
6、自定義顏色:
Holder.addTheme("dark", {
bg: "#000", // 背景色
fg: "#aaa", // 前景色(字體顏色)
size: 11, // 字體大小
font: "Monaco", // 字體
fontweight: "normal" // 字符粗细
});
7 、調整文字:
<img src="holder.js/500x250?text=文字第一行
文字第二行
">
8、更多參考: