background-position详解

背景：最近面试实习生，发现他们对background-position属性理解的不够透测，现分析如下：

1.background-position属性的功能是设置背景图片的位置

当其缩写在background属性里时，注意和background-size属性要斜线“/”分开，比如：

background:10px 10px/100px 100px;
/*以上代码浏览器会自动解析为*/
background-position-x:10px;
background-position-y:10px;
background-size:100px 100px;

 

2.background-position通常接受两个属性值，用来设置水平距离和垂直距离，当只设置一个值时，另外一个值会默认为center

以上面代码为例子：此时浏览器会将背景图以左上角为原点，背景图水平距离10像素，背景图垂直距离10像素的交点，与该背景图填充的div块的水平10px，div块垂直10px的交点重合。

 

 当上面代码修改成：

background-position:50% 50%;

 

 此时浏览器会将背景图x方向50%处与y方向50%处的交点，与div框x方向50%处与y方向50%处的交点重合，就会产生我们经常使用的背景图水平垂直居中的效果

总结：浏览器会将背景图x方向与y方向的交点与div框x方向与y方向的交点相重合。