《hhhhold.com》 – 很好玩的随机占位图片生成工具

  在制作网页的时候,我们会使用一些假内容和图片来填充页面,这样能够看到更真实的效果。在之前的工作中,我用过的一款占位图片生成工具生成的图片是只有背景色的色块,没有图像,所以效果不够真实。

  这篇文章向大家分享一款特别有个性的随机占位图片生成工具——hhhhold.com,你可以通过 URL 定制,hhhhold.com 会随机返回图片。你永远想象不到下一张会是什么图片。

 

《hhhhold.com》 – 很好玩的随机占位图片生成工具

 

使用示例:

  下面向大家展示13种常用的 URL 参数方法,示例图片是随机的,每次刷新都会有惊喜哦!

  (1)hhhhold.com/200,生成宽高为200px的随机方形图片。

  调用方法:

<img src="http://hhhhold.com/200" alt="Place Holder" />  

  示例图片:

  《hhhhold.com》 – 很好玩的随机占位图片生成工具

  (2)hhhhold.com/500×200,生成宽500px,高为200px的图片。

  调用方法:

<img src="http://hhhhold.com/500x200" alt="Place Holder" />  

  示例图片:

  《hhhhold.com》 – 很好玩的随机占位图片生成工具

  (3)hhhhold.com/200-300,生成宽高在 200px-300px 之间的随机图片。

  调用方法:

<img src="http://hhhhold.com/200-300" alt="Place Holder" />  

  示例图片:

  《hhhhold.com》 – 很好玩的随机占位图片生成工具

  (4)hhhhold.com/r,生成宽高在 100px 和 1280px 之间随机图片。

  调用方法:

<img src="http://hhhhold.com/r" alt="Place Holder" />

  (5)hhhhold.com/s,生成宽高在 100px 和 250px 之间随机图片。

  调用方法:

<img src="http://hhhhold.com/s" alt="Place Holder" />

  (6)hhhhold.com/m,生成宽高在 250px 和 500px 之间随机图片。

  调用方法:

<img src="http://hhhhold.com/m" alt="Place Holder" />

  (7)hhhhold.com/l,生成宽高在 500px 和 900px 之间随机图片。

  调用方法:

<img src="http://hhhhold.com/l" alt="Place Holder" />

  (8)hhhhold.com/xl,生成宽高在 900px 和 1280px 之间随机图片。

  调用方法:

<img src="http://hhhhold.com/xl" alt="Place Holder" />

  (9)hhhhold.com/d,生成暗色的随机图片。

  调用方法:

<img src="http://hhhhold.com/d" alt="Place Holder" />

  (10)hhhhold.com/b,生成亮色的随机图片。

  调用方法:

<img src="http://hhhhold.com/b" alt="Place Holder" />

  (11)hhhhold.com/jpg,指定图片格式,支持 jpg、gif、png。

  调用方法:

<img src="http://hhhhold.com/jpg" alt="Place Holder" />

  (12)hhhhold.com/w,生成宽的随机图片,不能指定尺寸。

  调用方法:

<img src="http://hhhhold.com/w" alt="Place Holder" />

  (13)hhhhold.com/t,生成高的随机图片,不能指定尺寸。

  调用方法:

<img src="http://hhhhold.com/t" alt="Place Holder" />  

 

 扩展插件:

  hhhhold.js,在页面中引入这个文件使得图片能够缓存。

  WPhhhhold!,一款用于集成在 WordPress 的插件。

  Sublime hhhhold!,非常好用的 Sublime Text 插件。

 

您可能感兴趣的相关文章

 

本文链接:hhhhold.com – 特别个性的随机占位图片生成工具

编译来源:前端里 ◆ 关注前端开发技术 ◆ 分享网页设计资源

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏