《hhhhold.com》 – 很好玩的随机占位图片生成工具
在制作网页的时候,我们会使用一些假内容和图片来填充页面,这样能够看到更真实的效果。在之前的工作中,我用过的一款占位图片生成工具生成的图片是只有背景色的色块,没有图像,所以效果不够真实。
这篇文章向大家分享一款特别有个性的随机占位图片生成工具——hhhhold.com,你可以通过 URL 定制,hhhhold.com 会随机返回图片。你永远想象不到下一张会是什么图片。
使用示例:
下面向大家展示13种常用的 URL 参数方法,示例图片是随机的,每次刷新都会有惊喜哦!
(1)hhhhold.com/200,生成宽高为200px的随机方形图片。
调用方法:
1 | < img src="http://hhhhold.com/200" alt="Place Holder" /> |
示例图片:
(2)hhhhold.com/500x200,生成宽500px,高为200px的图片。
调用方法:
1 | < img src="http://hhhhold.com/500x200" alt="Place Holder" /> |
示例图片:
(3)hhhhold.com/200-300,生成宽高在 200px-300px 之间的随机图片。
调用方法:
1 | < img src="http://hhhhold.com/200-300" alt="Place Holder" /> |
示例图片:
(4)hhhhold.com/r,生成宽高在 100px 和 1280px 之间随机图片。
调用方法:
1 | < img src="http://hhhhold.com/r" alt="Place Holder" /> |
(5)hhhhold.com/s,生成宽高在 100px 和 250px 之间随机图片。
调用方法:
1 | < img src="http://hhhhold.com/s" alt="Place Holder" /> |
(6)hhhhold.com/m,生成宽高在 250px 和 500px 之间随机图片。
调用方法:
1 | < img src="http://hhhhold.com/m" alt="Place Holder" /> |
(7)hhhhold.com/l,生成宽高在 500px 和 900px 之间随机图片。
调用方法:
1 | < img src="http://hhhhold.com/l" alt="Place Holder" /> |
(8)hhhhold.com/xl,生成宽高在 900px 和 1280px 之间随机图片。
调用方法:
1 | < img src="http://hhhhold.com/xl" alt="Place Holder" /> |
(9)hhhhold.com/d,生成暗色的随机图片。
调用方法:
1 | < img src="http://hhhhold.com/d" alt="Place Holder" /> |
(10)hhhhold.com/b,生成亮色的随机图片。
调用方法:
1 | < img src="http://hhhhold.com/b" alt="Place Holder" /> |
(11)hhhhold.com/jpg,指定图片格式,支持 jpg、gif、png。
调用方法:
1 | < img src="http://hhhhold.com/jpg" alt="Place Holder" /> |
(12)hhhhold.com/w,生成宽的随机图片,不能指定尺寸。
调用方法:
1 | < img src="http://hhhhold.com/w" alt="Place Holder" /> |
(13)hhhhold.com/t,生成高的随机图片,不能指定尺寸。
调用方法:
1 | < img src="http://hhhhold.com/t" alt="Place Holder" /> |
扩展插件:
hhhhold.js,在页面中引入这个文件使得图片能够缓存。
WPhhhhold!,一款用于集成在 Wordpress 的插件。
Sublime hhhhold!,非常好用的 Sublime Text 插件。
- Respond.js – 让IE6-8支持 CSS3 Media Query
- Debuggex – 超好用的正则表达式可视化调试工具
- 前端文摘——网页图片优化的实用工具和技巧分享
- Lazy Line Painter – 有趣的 jQuery 路径动画插件
- Zepto.js – 为现代浏览器而生的轻量JavaScript库
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述
2011-03-27 分享16款基于 HTML5 Canvas 开发的网页游戏