holder.js占位图片生成器

男娘i 2022-06-03 06:23 209阅读 0赞

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

好在 [holder.js][] 可以帮我们自动生成占位图片，而且还能定义占位图片的一些基本样式。

![20171220205318389][]

## 基本用法 ##

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

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

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

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

![基本用法][1240]

## 控制占位图片尺寸 ##

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

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

![宽度按百分比定义的占位图片][1240 1]

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

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

![保持长宽比的占位图片][1240 2]

## 调整占位图片的样式 ##

### 调整颜色 ###

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

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

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

![holder.js内置的6种配色][holder.js_6]

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

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

### 调整文字 ###

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

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

![带有自定义文字的占位图片][1240 3]

以上就是holder.js的使用方法。

[holder.js]: http://holderjs.com/
[20171220205318389]: /images/20220603/32e6137e5230446ab4fcddd3c93c3c56.png
[1240]: /images/20220603/fd5203a4b1d8498b8a547214239b19f6.png
[1240 1]: /images/20220603/1a7ab86931664ea986bb07346dab422d.png
[1240 2]: /images/20220603/87f29ff5894e4c85a537d2c4942a4a0e.png
[holder.js_6]: /images/20220603/5ebe50a74e754d32ab6f0827c698934d.png
[1240 3]: /images/20220603/088f667ee71c4d8a9bb3ab6c66e8c511.png