喜歡的麻煩給博主一個關注zhichi哈:
博主CSDN:
https://blog.csdn.net/qq_38254897
ID:大叔級的熊大
圖片佔位符生成器:holder.js
當我們在進行網頁的排版佈局時,有時會需要放置些佔位圖片來豐富內容,手動生成這些佔位圖片的話,特別是尺寸要精確到像素時,就會有些繁瑣。
holder.js 是專門幫我們自動生成佔位圖片,而且還能定義佔位圖片的一些基本樣式。以下是html5版本使用holder.js的頭文件格式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="bs/js/jquery.min.js"></script>
<script src="bs/js/bootstrap.js"></script>
<script src="bs/js/holder.min.js"></script>
</head>
基本用法
Holder.js的基本用法很簡單,可以去 官網 下載, 引入holder.js文件就可以了,也可以直接使用Bootcss的CDN :
<script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
向頁面中插入佔位圖片,只需把img標籤的src屬性統一設置成holder.js,並附上圖片的尺寸就可以了:
記住:代碼裏的holder.js相當於是holder.min.js裏的一個方法:<img src="holder.js/300x200">:
<img src="holder.js/300x200">
holder.js就會在該處自動生成一張規定尺寸的佔位圖片:
控制佔位圖片尺寸
holder.js中的圖片尺寸,默認單位是像素。也可以用百分比作爲單位,這樣佔位圖片就會根據父節點的尺寸自動縮放。注意,holder.js中百分比要寫p,而不是%:
<img src="holder.js/100px200"`>
1
想要讓佔位圖片在縮放時,依然保持固定的長寬比,可以加上auto參數:
<img src="holder.js/300x200?auto=yes">
調整佔位圖片的樣式
調整顏色
holder.js生成的佔位圖片默認是淺灰色配色,配色可以通過theme參數修改:
<img src="holder.js/300x200?auto=yes&theme=vine">
holder.js共定義了6種佔位圖片配色,分別是:sky、vine、lava、gray、industiral、social。
如果內置的配色方案不滿足你的需要的話,還能自己定義配色。可以配置項有限,但基本上能滿足需要:
Holder.addTheme("dark", {
bg: "#000", // 背景色
fg: "#aaa", // 前景色(字符顏色)
size: 11, // 字符大小
font: "Monaco", // 字體
fontweight: "normal" // 字符粗細
});
調整文字
佔位圖片的正中默認顯示該圖片的尺寸,可以通過text參數修改成任意文字。如果需要換行,就在換行處輸入\n,注意\n的兩邊各需要一個空格:
<img src="holder.js/300x200?text=此處請放一張綠色的圖片 \n 最好有邊框">
以上就是holder.js的使用方法。
喜歡的麻煩給博主一個關注zhichi哈:
博主CSDN:
https://blog.csdn.net/qq_38254897
喜歡的麻煩給博主一個關注zhichi哈:
博主CSDN:
https://blog.csdn.net/qq_38254897
ID:大叔級的熊大
https://blog.csdn.net/qq_38254897
ID:大叔級的熊大