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

4,348 阅读1分钟
原文链接: varnull.cn

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

因此本周推荐一个非常好用的图片占位符小工具~ 一言不合先看图~ 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">  

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

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

如果我的文章对您有帮助
欢迎打赏(。・ω・)