當(dāng)我們在進行網(wǎng)頁的排版布局時堵泽,有時會需要放置些占位圖片來豐富內(nèi)容,手動生成這些占位圖片的話泻仙,特別是尺寸要精確到像素時屑那,就會有些繁瑣拱镐。
好在 holder.js 可以幫我們自動生成占位圖片,而且還能定義占位圖片的一些基本樣式持际。
基本用法
Holder.js的基本用法很簡單,可以去 官網(wǎng) 下載哗咆, 引入holder.js文件就可以了蜘欲,也可以直接使用Bootcss的CDN :
<script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
向頁面中插入占位圖片,只需把img
標簽的src
屬性統(tǒng)一設(shè)置成holder.js
晌柬,并附上圖片的尺寸就可以了:
<img src="holder.js/300x200">
holder.js就會在該處自動生成一張規(guī)定尺寸的占位圖片:
基本用法
控制占位圖片尺寸
holder.js中的圖片尺寸姥份,默認單位是像素。也可以用百分比作為單位年碘,這樣占位圖片就會根據(jù)父節(jié)點的尺寸自動縮放澈歉。注意,holder.js中百分比要寫p
屿衅,而不是%
:
<img src="holder.js/100px200"`>
寬度按百分比定義的占位圖片
想要讓占位圖片在縮放時埃难,依然保持固定的長寬比,可以加上auto
參數(shù):
<img src="holder.js/300x200?auto=yes">
保持長寬比的占位圖片
調(diào)整占位圖片的樣式
調(diào)整顏色
holder.js生成的占位圖片默認是淺灰色配色,配色可以通過theme
參數(shù)修改:
<img src="holder.js/300x200?auto=yes&theme=vine">
holder.js共定義了6種占位圖片配色涡尘,分別是:sky
忍弛、vine
、lava
考抄、gray
细疚、industiral
、social
川梅。
holder.js內(nèi)置的6種配色
如果內(nèi)置的配色方案不滿足你的需要的話疯兼,還能自己定義配色∑锻荆可以配置項有限镇防,但基本上能滿足需要:
Holder.addTheme("dark", {
bg: "#000", // 背景色
fg: "#aaa", // 前景色(字符顏色)
size: 11, // 字符大小
font: "Monaco", // 字體
fontweight: "normal" // 字符粗細
});
調(diào)整文字
占位圖片的正中默認顯示該圖片的尺寸,可以通過text
參數(shù)修改成任意文字潮饱。如果需要換行来氧,就在換行處輸入\n
,注意\n
的兩邊各需要一個空格:
<img src="holder.js/300x200?text=此處請放一張綠色的圖片 \n 最好有邊框">
帶有自定義文字的占位圖片
以上就是holder.js的使用方法香拉。