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