今天学习响应式的时候看见了图片占位生成器holder.js,所以来记录一下:
我们在网页设计时会需要一些图片来占位,但是去搜索使用合适尺寸的图片浪费时间,这时候就需要holder.js来自动生成占位图片,还可以定义一些图片的基本样式,方便快捷。
holder.js生成图片使用的是SVG技术,不依赖jQuery等第三方库。
下载地址:
官网下载地址:http://www.bootcdn.cn/holder/
基本用法:
1.在HTML中引入holder.js文件
可以直接下载到本地使用,也可以直接使用Bootcss的CDN :
<script src="js/holder.js"></script>
或者
<script src="https://cdn.bootcss.com/holder/2.9.4/holder.js"></script>
2.在img标签中使用
修改img标签的src属性或者data-src属性设置为holder.js,然后加图片的尺寸,宽乘以高,两者使用“/”隔开。
<img src="holder.js/300x500" alt="300x500">
显示如下图所示:
注意:(1) 尺寸中x不是乘号,而是小写字母x。
(2) 尺寸的默认单位是像素。
3.在指定区域使用,
在id为test的区域显示占位图片,图片的尺寸是占满整个元素,同时定义了新的主题配色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>holder.js学习</title> <script src="holder.js"></script> <style> div{ width: 100%; height:200px; } </style> </head> <body> <div id="test"> </div> </body> <script> Holder.addTheme("new",{ fg:"#fff",//前景色 bg:"#c3c0c0",//背景色 size:10 //字符大小 }).addImage("holder.js/100px200?theme=new","#test").run(); </script> </html>
控制占位图片的尺寸:
holder.js中的图片尺寸默认单位是像素,也可以使用百分比为单位,这样占位图片可以根据父节点的尺寸自动缩放。
固定宽高尺寸的占位图片:宽度为300px 高度为100px的占位图片
<img src="holder.js/300x100" alt="300x100">
宽度按百分比定义的占位图片:宽度是占父元素的100%,但是高度是固定的200像素。
注意:这里的百分比不使用%而是使用字母p
<img src="holder.js/100px200"/>
占位图片缩放宽高比,可以加上auto参数:
<img src="holder.js/300x200?auto=yes">
调整占位图片的样式:
holder.js生成图片的默认颜色是浅灰色,holder.js一共定义了6中图片配色,分别为:sky、vine、lava、gray(#eee)、industiral、social。
颜色可以通过theme参数修改:比如
<img src="holder.js/300x200?theme=sky">
占位图片的样式还可以自定义,一下是各种可以自定义的参数:
theme:主题,改变图片的颜色。 例如:holder.js/300x200?theme=lava random:使用随机主题,图片的颜色是随机产生的,每次刷新图片颜色会改变。 例如:holder.js/300x200?random=yes outline: //画出图片轮廓和对角线的占位符。如下图:例如:holder.js/300x200?outline=yes
lineWrap: //最大线长度宽度比形象。例如:holder.js/300x200?lineWrap=0.5 ************************************************************************* bg: "#eee", //背景颜色 holder.js/300x200?bg=#2a2025 fg: "#999", //字体颜色 holder.js/300x200?fg=#ffffff text: 文本, //图片上显示的文本,holder.js/300x200?text=Hello
占位图片的正中默认显示该图片的尺寸,可以通过text
参数修改成任意文字。如果需要换行,就在换行处输入\n
,注意\n
的两边各需要一个空格。
<img src="holder.js/300x200?text=这是一张图片 \n 大小固定">
size: 20, //字号 holder.js/300x200?text=HELLO
font: "微软雅黑", //字体 fontweight: "400", //字体加粗程度,
自定义图片皮肤:
语法:Holder.addTheme("皮肤名字",{各种参数对象});
自定义皮肤示例:
Holder.addTheme("diy", {
bg: "#ccc",
fg: "#fff",
size: 20,
font: "微软雅黑",
fontweight: "400",
outline:"yes"
});
在img标签中
<img src="holder.js/300x200?theme=diy">
以上就是了解到的关于holder.js的用法了,不过我觉得还是基础的用法最重要。