holder.js

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、調整顏色:參數skyvinelavagrayindustiralsocial

<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、更多參考:
官網:http://holderjs.com/
GitHub:https://github.com/imsky/holder
 
 


分享所學知識,願能求得朋友共同討論與分享。
明天的筆記本logo