background-position百分比

 

 

平常习惯于使用描述性的left、top、center、right、bottom或者px等对背景图片定位，百分比比较少用。

其实描述性的也可以用百分比来表示。

比如背景图片水平垂直居中可以用background-position:center center; 或 background-positon:50% 50%;

百分比值是以背景图的中心点到容器左上点的距离百分比

一般用background-position: 50% 10px; 而不用background-position: center 10px;

因为类似这种描述性词语和数值混用的形式不被W3C推荐。

百分比进行定位比描述性词语定位更灵活

（单纯的描述性词语组合使用是没有问题的，例如：background-position: right bottom;）

 

只给出一个属性值而不是一对，那么它只作用于水平方向，且垂直方向默认为“50%”