bootsrapt图片占位符生成器:holder.js

原创 新起点博客  2018-11-07 10:33 
【上云必备】上云仅?102/年

当我们在进行网页的排版布局时,有时会需要放置些占位图片来丰富内容,手动生成这些占位图片的话,特别是尺寸要精确到像素时,就会有些繁琐。今天河南SEO为大家分享一个简单快捷的方法。好在 holder.js 可以帮我们自动生成占位图片,而且还能定义占位图片的一些基本样式。

基本用法

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

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

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

  <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.js内置的6种配色

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

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

调整文字

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

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

带有自定义文字的占位图片

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

本文地址:https://www.henenseo.com/archives/844
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情

  1. xing
    xing 【】 @回复

    来看看,因为,总能学到东西!