圖片占位符生成器:holder.js

當(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忍弛、vinelava考抄、gray细疚、industiralsocial川梅。

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的使用方法香拉。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末啦扬,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子凫碌,更是在濱河造成了極大的恐慌扑毡,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,084評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盛险,死亡現(xiàn)場離奇詭異瞄摊,居然都是意外死亡,警方通過查閱死者的電腦和手機苦掘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3 392
  • 文/潘曉璐 我一進店門换帜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鹤啡,你說我怎么就攤上這事惯驼。” “怎么了递瑰?”我有些...
    開封第一講書人閱讀 163,450評論 0 353
  • 文/不壞的土叔 我叫張陵祟牲,是天一觀的道長。 經(jīng)常有香客問我抖部,道長说贝,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,322評論 1 293
  • 正文 為了忘掉前任慎颗,我火速辦了婚禮乡恕,結(jié)果婚禮上言询,老公的妹妹穿的比我還像新娘。我一直安慰自己几颜,他們只是感情好倍试,可當(dāng)我...
    茶點故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蛋哭,像睡著了一般县习。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上谆趾,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天躁愿,我揣著相機與錄音,去河邊找鬼沪蓬。 笑死彤钟,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的跷叉。 我是一名探鬼主播逸雹,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼云挟!你這毒婦竟也來了梆砸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤园欣,失蹤者是張志新(化名)和其女友劉穎帖世,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沸枯,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡日矫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了绑榴。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哪轿。...
    茶點故事閱讀 39,773評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖彭沼,靈堂內(nèi)的尸體忽然破棺而出缔逛,到底是詐尸還是另有隱情,我是刑警寧澤姓惑,帶...
    沈念sama閱讀 35,470評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站按脚,受9級特大地震影響于毙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜辅搬,卻給世界環(huán)境...
    茶點故事閱讀 41,080評論 3 327
  • 文/蒙蒙 一唯沮、第九天 我趴在偏房一處隱蔽的房頂上張望脖旱。 院中可真熱鬧,春花似錦介蛉、人聲如沸萌庆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽践险。三九已至,卻和暖如春吹菱,著一層夾襖步出監(jiān)牢的瞬間巍虫,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1 269
  • 我被黑心中介騙來泰國打工鳍刷, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留占遥,地道東北人。 一個月前我還...
    沈念sama閱讀 47,865評論 2 370
  • 正文 我出身青樓输瓜,卻偏偏與公主長得像瓦胎,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子尤揣,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,689評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫搔啊、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,098評論 4 62
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,095評論 25 707
  • 我把頭抵在玻璃上芹缔,身體靠在窗邊坯癣,目不轉(zhuǎn)睛的看著對面的公寓。 起初那棟三十層的高樓只亮起了一盞燈最欠,像是一只突然從長夜...
    蒙之吃吃閱讀 244評論 0 0
  • 一示罗、根成與蛇 根成是聾子四爺收養(yǎng)的。 聾子四爺是個老光棍芝硬,背駝蚜点,拄根手杖,破爛的對襟黑棉襖拌阴,腰上系根長腰帶绍绘,耳聾,...
    弓文銳閱讀 498評論 0 4
  • 風(fēng)來過 嘩嘩啦啦 葉離去 紛紛揚揚 藍天白云下 宛如自由飛翔的鳥
    悠然飄葉閱讀 155評論 0 1