placehold.it-線上圖片產生器

標籤：

　　placehold的介紹

　　當我們進行網頁設計時，經常會使用各種尺寸的圖片。有時候我們用一個固定寬和高的div來進行代替，可是這樣的效果不是很明顯，而且還要進行各種各樣的文字說明；或者我們得從網上尋找各種尺寸的圖片然後上傳上去，比較麻煩。此時如果有了placehold，就不用那麼的麻煩了。placehold能夠根據使用者的需要產生各種尺寸的圖片，同時配上自己的文字，而且還能根據自己的需要修改圖片的背景顏色和文字顏色。

當然，此時肯定會有很多人說，dummyimage也是提供一模一樣的功能的，可是很可惜，我們的梯子不夠高。在我尋找dummyimage的替代工具時，無意間看到了placehold.it這個網站，雖然使用起來沒dummyimage那麼順手，但是瞭解之後其實也蠻不錯的。

　　placehold的使用

　　上面簡單的介紹了下placehold，現在來說下這個是如何使用的。

　　格式說明

　　首先來簡單的說下這個網站中圖片的地址格式：

http://www.placehold.it/widthxheight/bgcolor/textcolor[&text=hello+world]

　　組成說明：
　　1. http://www.placehold.it: 網站地址。
　　2. widthxheight: 圖片的寬(width)和高(height)，注意width和height的中間是x，而不是*,如350x200；同時，height可以預設，那麼就預設height=width，此時產生的是邊長為width的正方形圖片。
　　3. bgcolor: 圖片的背景顏色，值為6位的16進位數字，如ffffff, 7d7d7d等。
　　4. textcolor: 文字的顏色，可以單獨預設，也可以與bgcolor同時預設，值與bgcolor相同。
　　5. &text=hello+world: 如果想要在圖片上添加文字的話，那麼就在整個url的最後追加上&text=文字，如果文字中間有空格的話，用+代替；該欄位可以預設，預設顯示的是圖片的寬和高。

　　需要特別注意的是：

　　* widthxheight必須是第一個參數；
　　* bgcolor/textcolor中，兩個參數必須連著，中間不能不能插入其他的參數；
　　* &text= 如果有的話，必須是最後一個參數。

 

　　例如：http://www.placehold.it/350x150/ 
　　

　　http://www.placehold.it/350x150/8B7355/B23AEE/
　　

　　http://www.placehold.it/350x150/8B7355/B23AEE/&text=love+wenzi
　　

　　　　圖片的格式尾碼

　　圖片有著各種各樣的格式尾碼：.gif, .jpeg, .jpg, png等。placehold也能添加圖片的格式尾碼，這些可以尾碼可以添加到 widthxheight, bgcolor或textcolor的任意一個參數後面，如：

http://www.placehold.it/350x150.png/8B7355/B23AEE/  http://www.placehold.it/350x150/8B7355.gif/B23AEE/http://www.placehold.it/350x150/8B7355/B23AEE.jpg/

　　最後提供一個顏色表，搭配自己喜歡的顏色：http://www.114la.com/other/rgb.htm

　　原文地址：http://www.xiabingbao.com/f2e/2015/03/12/placehold-introduce/

placehold.it-線上圖片產生器