<!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>