喜欢的麻烦给博主一个关注zhichi哈：

博主CSDN:

https://blog.csdn.net/qq_38254897

ID:大叔级的熊大

图片占位符生成器：holder.js

当我们在进行网页的排版布局时，有时会需要放置些占位图片来丰富内容，手动生成这些占位图片的话，特别是尺寸要精确到像素时，就会有些繁琐。

holder.js 是专门帮我们自动生成占位图片，而且还能定义占位图片的一些基本样式。以下是html5版本使用holder.js的头文件格式：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Insert title here</title>
       <link rel="stylesheet" href="bs/css/bootstrap.css">
       <script src="bs/js/jquery.min.js"></script>
       <script src="bs/js/bootstrap.js"></script>
       <script src="bs/js/holder.min.js"></script>
</head>

基本用法
Holder.js的基本用法很简单，可以去官网下载，引入holder.js文件就可以了，也可以直接使用Bootcss的CDN :

<script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>

向页面中插入占位图片，只需把img标签的src属性统一设置成holder.js，并附上图片的尺寸就可以了：

记住：代码里的holder.js相当于是holder.min.js里的一个方法：<img src="holder.js/300x200">：

<img src="holder.js/300x200">

holder.js就会在该处自动生成一张规定尺寸的占位图片：

控制占位图片尺寸
holder.js中的图片尺寸，默认单位是像素。也可以用百分比作为单位，这样占位图片就会根据父节点的尺寸自动缩放。注意，holder.js中百分比要写p，而不是%：

<img src="holder.js/100px200"`>

想要让占位图片在缩放时，依然保持固定的长宽比，可以加上auto参数：

<img src="holder.js/300x200?auto=yes">

调整占位图片的样式
调整颜色
holder.js生成的占位图片默认是浅灰色配色，配色可以通过theme参数修改：

<img src="holder.js/300x200?auto=yes&theme=vine">

holder.js共定义了6种占位图片配色，分别是：sky、vine、lava、gray、industiral、social。

如果内置的配色方案不满足你的需要的话，还能自己定义配色。可以配置项有限，但基本上能满足需要：

Holder.addTheme("dark", {bg: "#000", // 背景色fg: "#aaa", // 前景色（字符颜色）size: 11, // 字符大小font: "Monaco", // 字体fontweight: "normal" // 字符粗细
});

调整文字
占位图片的正中默认显示该图片的尺寸，可以通过text参数修改成任意文字。如果需要换行，就在换行处输入\n，注意\n的两边各需要一个空格：

<img src="holder.js/300x200?text=此处请放一张绿色的图片 \n 最好有边框">

关于BootStrap占位图片生成器：holder.js/holder.min.js

喜欢的麻烦给博主一个关注zhichi哈：

博主CSDN:

https://blog.csdn.net/qq_38254897

图片占位符生成器：holder.js

holder.js 是专门帮我们自动生成占位图片，而且还能定义占位图片的一些基本样式。以下是html5版本使用holder.js的头文件格式：

记住：代码里的holder.js相当于是holder.min.js里的一个方法：<img src="holder.js/300x200">：

喜欢的麻烦给博主一个关注zhichi哈：

博主CSDN:

https://blog.csdn.net/qq_38254897

喜欢的麻烦给博主一个关注zhichi哈：

博主CSDN:

https://blog.csdn.net/qq_38254897

https://blog.csdn.net/qq_38254897