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

当我们在进行网页的排版布局时，有时会需要放置些占位图片来丰富内容，手动生成这些占位图片的话，特别是尺寸要精确到像素时，就会有些繁琐。
好在 holder.js 可以帮我们自动生成占位图片，而且还能定义占位图片的一些基本样式。

基本用法

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

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

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

控制占位图片尺寸

holder.js中的图片尺寸，默认单位是像素。也可以用百分比作为单位，这样占位图片就会根据父节点的尺寸自动缩放。

注意，holder.js中百分比要写p，而不是%：
想要让占位图片在缩放时，依然保持固定的长宽比，可以加上auto参数：

调整占位图片的样式

调整颜色

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

[/crayon]
holder.js共定义了6种占位图片配色，分别是：sky、vine、lava、gray、industiral、social。
如果内置的配色方案不满足你的需要的话，还能自己定义配色。虽然 配置项有限，但基本上能满足需要：

调整文字

占位图片的正中默认显示该图片的尺寸，可以通过text参数修改成任意文字。如果需要换行，就在换行处输入n，

注意n的两边各需要一个空格：
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
  • 本站名称：追梦人博客
  • 本站永久地址：https://www.dreamren.cn
  • 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系在线客服进行删除处理
  • 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责
  • 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
  • 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新
  • 如果您喜欢本站，♥点这儿开通会员资助本站
  • 如遇软件内有加群提示，为修改者自留，非本站信息，注意鉴别
  • 这些信息可能会帮助你了解本站：

SVIP会员 关于我们 网址导航 标签云