【第22期】观点:IT 行业加班,到底有没有价值?

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

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

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

相关文章推荐

background-position的百分比是怎么计算定位的

首先,背景设置为no-repeat,定位坐标才可以生效采用像素值来定位时,像素值意味着背景图片和元素左上角的差值。采用百分比时,效果却很奇怪,0% 0%时背景图片和元素左上角对其,100% 100%时...

background-position 百分比问题,精灵图的实现

background-position %

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

利用css的background-image和background-position将多图放在一张图片上取用

将很多图标放在一张图片上,既方便管理,又不会出现有的图标加载比较慢,有的图标加载不到等情况。 1、html代码里面,比如要把图标放在一个span里,这样写: 2、然后将在css里这样写: ...

css用一张背景图background-position定位

css用一张背景图background-position定位 不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON,栏...

HTML&CSS——css sprites技术将多个背景集成到一个png图片上css定位

美国YAHOO在页面制作中所用到的图片整合技术,这样做虽然需要花一定的时间来有规则的合并这些ICON,栏目背景,图片按钮,以方便CSS调用,但是这样做绝对是合算的,而且是有必要的,YSlow也是极力推...

CSS中Backgroud-position(背景图片)定位问题详解

background-position的说明:     设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。...

CSS Sprites(CSS雪碧图)利用background-position从大图中扣出小图

CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,...

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

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

多个图标集于一张背景图片在网页上显示指定区域

早就发现了。。很多大一点的门户里面用的一些背景图都是一个页面只有一张背景图。。所有要用的图标全都放到一张图里面。开始想应该是用位置来控制的,但自己在做网页的时候位置太难调了一直没去实现。。今天在网上找...
  • zxcdhm
  • zxcdhm
  • 2013-04-24 21:50
  • 1206

为什么将多个图标放在一个图片里?

为什么将多个图标放在一个图片里? 2008年10月23日 评分 5.0, 满分 5 星2 票 +Add 添加评论 在制作网页时, 为什...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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