标签:lock style bottom str div ott logs 部分 ref
1.等价写法
在看各类教程时有以下等价写法:·
这是怎么换算的呢?
2.百分比计算公式
任何CSS属性值为percent时,都需要根据某个参考值进行计算,搞明白这个参考值是什么,理解就容易多了。·
标准规定:background-position:perenct的参考值为: (容器宽度 - 背景图片宽度).
background-postion:x y; x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。 y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。
有了这个公式,就很容易理解百分百写法了,同理如果是负的百分比呢?
background-position:-50% -50%;
等同于x:- {容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
等同于y:- {容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。
从上面看出来,百分比为:
background-position x的值 = (背景图片左上角离包含块左上角距离)/(容器宽度 - 背景图片宽度)*100%。y的值同理可得。
平常使用 background-position
,一般是用固定值,比如:
1 div { 2 background-position: 60px 10px; // 背景图片左上角离包含块左上角距离为水平方向 60px,竖直方向 10px 3 }
那如果上面的固定值,我坚持要写成百分比如何?
已知背景图片大小为 450×250,包含块div大小为 600×300。
计算得:
x = 60/(600-450)*100%=40%
y = 10/(300-250)*100%=20%
答案是:
1 div { 2 background-position:40% 20%; 3 }
附上2个参考链接,写的很详细却也很复杂....
http://caibaojian.com/background-position-percent.html
http://www.cnblogs.com/zxx-foreve1130/p/3964243.html
标签:lock style bottom str div ott logs 部分 ref
原文地址:http://www.cnblogs.com/smallyueliang/p/7580838.html