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%时...
  • jhqdlove
  • jhqdlove
  • 2016年05月27日 17:43
  • 677

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

background-position %
  • qq_35809245
  • qq_35809245
  • 2017年01月07日 18:00
  • 899

background-position百分比的问题

百分比的计算方法: x=(容器宽度-背景图片宽度)*百分数 y=(容器高度-背景图片高度)*百分数 差值可正可负 例如: .b4 x=(300-600)*(-20%)=60px y=...
  • Whisper_a
  • Whisper_a
  • 2015年03月17日 15:46
  • 220

background-position百分比原理

今天帮别人调代码时,看到一个样式: background-position: 50% 0;background-size: 100% auto; 对background-size:10...
  • u011724770
  • u011724770
  • 2016年10月31日 15:12
  • 231

css不兼容情况 background-position在firefox下不兼容,出现图片位置不对,的处理情况;ie6、ie7强制选择器。

一、只需要在样式中加入,html{height:100%;}就正常了。 二、一些情况下在有ie不兼容情况,可以用 *html  (样式名称){css代码},可以实现强制选择ie6执行的情况; 用*+...
  • zhengbo0
  • zhengbo0
  • 2014年03月31日 10:55
  • 1177

CSS-理解百分比的background-position

通过这篇文章我要教大家解决一个曾经很困扰我的麻烦问题。我们要使用百分比的background-position值来解决一些问题。 通常使用方法 摆放图片 通常在容器里摆放图片是给出具...
  • john985
  • john985
  • 2016年11月20日 03:13
  • 133

CSS中背景图片的属性:background-repeat、background-position、background-size

背景图片的各种属性: 1、background-repeat:设置图片平铺方式。有三个属性:no-repeat(图片保留自身大小不平铺)、repeat-x(图片在水平方向上平铺)、repeat-y(...
  • xuehyunyu
  • xuehyunyu
  • 2017年05月26日 21:18
  • 838

JavaScript中的backgroundPosition的设置

在CSS中background-position有对值的设置有两种:一是用数值(绝对的),另一个使用百分比(相对的)。这两种方式会有不同的浏览器兼容问题(主要是IE和FF)。 基本代码如下 ...
  • cherry_vicent
  • cherry_vicent
  • 2015年03月11日 12:30
  • 2430

HTML中background-position 用法详细介绍

background-position 用法详细介绍 语法:  background-position : length || length  background-position : ...
  • linzhiqiang0316
  • linzhiqiang0316
  • 2016年07月27日 09:38
  • 1678

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

百分比值同关键字很接近,但其操作方式不一样。用百分比值来居中一幅背景图像,也很简单:    body { background-image;url(beijing.gif); backgro...
  • dabao1989
  • dabao1989
  • 2013年11月11日 13:38
  • 538
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:background-position百分比格子速记法
举报原因:
原因补充:

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