2

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

 2 years ago
source link: https://www.geekjc.com/post/5dcaaa5832b1fb08cfec8e2a
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
关注本站公众号获取最新福利

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

时间: 11/12/2019作者: frontend-联合编辑浏览量: 392

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

因此本周推荐一个非常好用的图片占位符小工具~ 一言不合先看图~ 2019111201.png2019111202.png2019111203.png 上门三张图片用来占位的话,不仅标有尺寸很清晰,而且可以调整背景色和文字颜色。即使 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/, 开始玩耍吧~

关注下面的标签,发现更多相似的文章

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK