井井客

搜索

如何去估值计算background百分比

这里说到的background百分比主要为background-size与background-position这种两种百分比的估值计算,细微差到时候可以进行微调。

如何去估值计算background百分比

因为最近做的项目中有用到background百分比,在计算的时候一直是用估值的方式再一点点慢调,发现background-position的百分比计算与PX相差还满大的,做完之后准备总结一下这方面的知识,但是网上百度了好几篇文章,反而看得我云里雾里的。所以还是自己动手画图总结了一下。计算后的值实验中还是会有一丢丢差别,后期微调一下就可以了。

1、background-size百分比计算

这个相对来讲比较简单:
例如已知一个容器的尺寸宽是50px高也是50px,而一张综合的大背景图片尺寸宽是200px高也为200px。其中需要放的元素图片尺寸则为60px宽高,并且它距离上面高70px,距离左边60px。那么 计算背景图片size百分比的思路如下:
(1)我需要将元素图片缩小到容器的尺寸,计算得出50(容器)/60(元素)约等于83.33%,就是相当于大背景图片尺寸需要缩小于83.33%才能使元素图片与容器尺寸一致。
公式:计算后的大背景尺寸 = 大背景尺寸*(容器尺寸/元素尺寸)
(2)得出了大背景尺寸为166.66px(大背景图片),而这个尺寸是容器的多少倍,则size的倍数则为多少倍
计算出size百分比 = 计算后的大背景尺寸/ 容器尺寸
即:size百分比 = 大背景尺寸*(容器尺寸/元素尺寸)/容器尺寸
最终也就是:size百分比 = 大背景尺寸 / 元素尺寸
变成数字就是 200/60*100% 约等于 333.33%

文字说的比较多,总结一下就先拿元素尺寸跟容器尺寸比,再拿大背景(与上一个比率计算后的)与容器尺寸比,中间容器尺寸抵消了就剩下大背景与元素比了。看图:

如何去估值计算background百分比

2、background-position百分比计算

这是比较难理解的一块,所以我用我自己的方式给分析了一下。我自己其实也只理解整理出了一种情况,后期如果还有用到其它情况的话我再补充一下。

不过在讲这之前我们要清楚一个概念如果写0% 0%的话,这时图片的左上角与容器的左上角重合
而100% 100%的话,则图片右下角与右下角重合。

当背景元素正好放入容器内时,假设有两个轴(横轴纵轴),而这两个轴在横纵两个百分比的位置,能够达到巧妙的平衡点。
类似假设30% 40%时,大背景与容器宽度30%位置的那条纵轴(对应X方向)重合,而高度40%位置的那条横轴(对应Y方向)重合。

其实我们现在就是要知道30% 40%这个值,是怎么算出来。还是继续看图说明吧

如何去估值计算background百分比

这样就比较明白了。

最后做一次总结:
background-size百分比 = 背景图尺寸 / 背景元素尺寸
background-position百分比
第一个值为:背景元素距离左边的值 / 背景元素距离左边的值 + 背景元素宽度
第二个值为:背景元素距离上边的值 / 背景元素距离上边的值 + 背景元素高度

文章TAG:CSS

作者:井井客原创来源:原创
本文标题:如何去估值计算background百分比
本文链接:http://www.jingjingke.com/c/28134.html

上一篇:利用jQuery给表单元素添加删除disabled和readonly属性
下一篇:[基础版]JS添加获取cookie方法

文章分类

相关阅读

随便看看