background-position百分比格子速记法

原创 2016年08月30日 17:01:55

虽然上次有开文说到background的估值计算,但是实际应用中还是觉得麻烦且有时候计算的微差挺大,最近又发现了一种格子速记的方法,感觉好像挺不错的。

其实最近在做的APP项目中已经在开始重整代码,大部分图标也都打算使用iconfont里面的字体图标来完成,不过前期的页面还在更新当中,一时没办法放弃这种背景图片background-position百分比的方法,在做尝试的时候发现了这种格式速记的方法,比较省事的样子~

background-position百分比格子,首先满足条件的格子有1格,2格,3格,4格,5格,6格,9格,11格,21格,而这些格子可以横纵自己组合,目前我使用的是6*6的格子(我自己沉得这种格子满适用的),而11格和21格还没有用到只是类推出的结果,不过应该也大差不差~

1格比容简单这里就不说了,先从2*1格子来说吧,假设图片默认里面是横排可以放两个图标(横向尺寸对半分),即2格,首先background-position竖向的值即可以写0%也可以写100%,而横向则有区别,第一个图标应是0%,第二个图标应是100%。这时的background-size值是200%,而你实际需要的尺寸则跟百分比是没有关系的。

如果不明白的话不要捉急,后面我会画个图说明一下~

再来说3*2格这种,假设图片横向平分3竖向平分2,即这张图可以存6个小标,这时background-size值是300%,而从左向右从上至下,background-position的值则为:0% 0%、50% 0%、100% 0%、100% 0%、100% 50%、100% 100%,现在有没有发现什么规律呢?

因为格子数越大,图标可放的就越多,再后面的格子就不用文字说了,只再说一下5*1格吧,因为竖向跟横向的规则是一样的,只是方法不一样而已,剩下的可以自己去类推一下~

5*1的格子,即横向平分了5份,从左向右只说position百分比为:0%、25%、50%、75%、100%这五个值。background-size的值为500%;

啦啦啦~开始上图了:

background-position百分比格子速记法示例图1

因为background-size的值的计算是实际展示区域的尺寸是没有关系,只跟这个格子与格子总长有关,所以这个值可以说一目了然,上图也有列出来,比如8格的,size的值就是800%。

而且图中也有另外贴出每个格子相差的值,我自己感觉这个就是百分比格子计算的根本。

当然实际应用中可能会出现较特殊情况,例如本来规划的图标就是100px*100px,但是突然有个效果图中图标尺寸需要的是160px*160px,在不影响之前写好的代码和图标的情况下,有两种方法可以解决:
(1)图片整体放大1.6倍
(2)尝试让这个图标占两格或多格

方法1是最省事的,无需怎么计算,直接放大背景图将160px存放在单元格,但是不好的地方就是图片放大后占用的体积也会变大,反而不美。而方法2则需要用到下面说的较复杂(合并多格)的情况,但是在前期说的那些格子中并不是所有的格子都能满足条件,目前可以使用2格、4格、6格、9格、21格,继续看下面这张图吧~

background-position百分比格子速记法示例图2

写到这里就差不多了~不过我自己思考的可能会有一些缺陷没有发现的地方,欢迎童鞋讨论与指正~

版权声明:本文为博主原创文章,转载请注明出处。

相关文章推荐

CSS背景图像位置属性background-position百分比详解

百分比值同关键字很接近,但其操作方式不一样。用百分比值来居中一幅背景图像,也很简单:    body { background-image;url(beijing.gif); backgroun...

[译]CSS-理解百分比的background-position

通过这篇文章能够深刻理解 background-position 的百分比 通过这篇文章我要教大家解决一个曾经很困扰我的麻烦问题。我们要使用百分比的 background-position ...
  • qfgg3
  • qfgg3
  • 2016-05-29 16:57
  • 111

background-position属性用法

background:url(../images/list01.png) no-repeat 0 center; background:url(../images/bg.png) no-repeat...

background-position 用法,终于搞清楚了,转来的保留下

语法: background-position : length || length background-position : position || position 取值: le...

background-position和雪碧图(CSS Sprites)用法

background-position属性使用频率非常高,大量的网站为了减少http请求数,会将大量的图片图片合成一张雪碧图(Sprite)来使用。雪碧图的使用就是通过控制background-pos...

如何去估值计算background百分比

这里说到的background百分比主要为background-size与background-position这种两种百分比的估值计算,如果有细微差到时候可以进行微调。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)