placehold.it - 图片占位符小工具推荐

placehold.it - 图片占位符小工具推荐

在做页面的时候,经常需要临时找个图片顶上或者测试~ 随便找张图可能大小尺寸并不符合自己的要求,放在页面上也丑丑的。。

因此本周推荐一个非常好用的图片占位符小工具~ 一言不合先看图~
alt
alt
alt

上门三张图片用来占位的话,不仅标有尺寸很清晰,而且可以调整背景色和文字颜色。即使 Demo 页面一样也可以美美哒~

四不四很神奇~ 我猜你一定已经打开调试器看图片 url 的,好啦其实只需要在 placehold.it 的 URL 后面加上图片尺寸和颜色的参数,就可以快速生成美观的占位图啦。

像这样:
<img src="http://placehold.it/400x150/ff3333/ffffff">
<img src="http://placehold.it/700x200/ffde00/000000?text=This+is+a+picture">

目前支持的参数有:

1.图片尺寸(必须作为第一个参数),在 URL 后添加 widthxheight 即可。如

<img src="http://placehold.it/700x200/">

2.图片背景色 及文字颜色(必须紧跟在图片尺寸参数后面),在 URL 后继续添加 background-color / text-color 即可。使用16进制,不需要写 #。 如黑色背景白色文字

<img src="http://placehold.it/700x200/000000/ffffff">

3.图片类型,可以放在任意一项参数后面,默认为 gif 格式。如

<img src="http://placehold.it/700x200/000000.jpg/ffffff">

4.图片上显示的文案(必须写在URL最后面),在URL最后添加 ?text=Demo 即可。空格可以用 + 表示。如

<img src="http://placehold.it/700x200/000000.jpg/ffffff?text=Demo+text">

不过这个好用的小工具也有缺点呢,就是偶尔会被墙。。

最后~ 放出链接 http://placehold.it/,开始玩耍吧~