background-position百分比原理详解

　　今天帮别人调代码时，看到一个样式：

　　background-position: 50% 0;

　　background-size: 100% auto；

　　对background-size:100% auto，意思是背景图片宽度为元素宽度*100%，高度等比缩放。详情可见css3 background。

　　对background-position很自然的以为百分比是根据父元素宽度计算的，但background-position真的不是，它有一套自己的原理。下面详细介绍。

　　一、等价写法

　　在看各类教程时有以下等价写法：

　　那么为什么left,top就等价于0% 0%，right bottom等价于100% 100%呢？

　　二、background-position百分比计算公式

　　background-postion:x y;

　　x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。

　　y：{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。

　　有了这个公式，就很容易理解百分百写法了，推算一下也就很容易理解上面各类等价写法了。

　　三、举例

　　1、background-position:center center等价于background-position:50% 50%等价于background-position:?px ?px

　　例子中用到背景图如下【尺寸：200px*200px】：

　　背景图在容器中居中。

　　效果同样居中。

　　到此这篇关于background-position百分比原理详解的文章就介绍到这了,更多相关background-position 百分比内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！