<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>holder.js 插件学习</title> <link rel="icon" type="image/png" href="favicon.png" /> <script src="/plugs/holder/holder.js"></script> <script> //自定义主题 Holder.addTheme("custom-theme", { bg: "#B0E3E6", fg: "#FF0000", size: 15, font: "微软雅黑", fontweight: "normal" }); </script> </head> <body> <!--默认:指定完与高x是小字字母x --> <img class="card-body" data-src="holder.js/300x200"> <!--指定参数:完x高?参数名1=参数值1&参数名2=参数值2&参数名3=参数值3 --> <!--指定显示文本--> <img class="card-body" data-src="holder.js/300x200?text=自定义显示文本"> <!--指定主题:默认6个,可自定义--> <img class="card-body" data-src="holder.js/300x200?theme=sky&text=sky 主题"> <img class="card-body" data-src="holder.js/300x200?theme=vine&text=vine 主题"> <img class="card-body" data-src="holder.js/300x200?theme=gray&text=gray 主题"> <img class="card-body" data-src="holder.js/300x200?theme=industrial&text=industrial 主题"> <img class="card-body" data-src="holder.js/300x200?theme=social&text=social 主题"> <img class="card-body" data-src="holder.js/300x200?theme=lava&text=lava 主题"> <img class="card-body" data-src="holder.js/300x200?random=yes&text=随机主题"> <img class="card-body" data-src="holder.js/300x200?theme=custom-theme&text=自定义主题 custom-theme"> <img class="card-body" data-src="holder.js/300x200?fg=#ccc&text=指定前景色 cccccc"> <img class="card-body" data-src="holder.js/300x200?bg=#666&text=指定背景色 666666"> <!--百分比完和高: p--> <img class="card-body" data-src="holder.js/100px200?text=百分之百宽度" style="margin-bottom: 5px;"> <img class="card-body" data-src="holder.js/300x200?auto=yes&text=自动大小"> <img class="card-body" data-src="holder.js/300x200?outline=yes&text=显示对角线"> </body> </html>