placehold.it - 图片占位符小工具推荐
在做页面的时候,经常需要临时找个图片顶上或者测试~ 随便找张图可能大小尺寸并不符合自己的要求,放在页面上也丑丑的。。
因此本周推荐一个非常好用的图片占位符小工具~ 一言不合先看图~
上门三张图片用来占位的话,不仅标有尺寸很清晰,而且可以调整背景色和文字颜色。即使 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/,开始玩耍吧~