背景图片位置“解密”

背景图片很好设置,背景位置也很好定位。一般是相对于左上角来定位:

background-position:10px 10px;

上面的意思就是:背景图片的左上角显示在背景区域的10x10处。这是我们经常用到的写法。

最近在做图片水平垂直居中的时候,就想到用背景图片来做:

background-position:50%;

或者:

background-position:center;

在用百分比的时候发现了一个问题,或者说自己以前没有注意到的地方:百分比不是按照背景图片的左上角来定位到背景区域的。如果百分比是按照以前认为的,当50%的时候,图片就不应该显示在居中位置,应该是:

img

带着疑问查阅了一下文档,果然里面有一套计算公式。

Percentages: refer to size of background positioning area minus size of background image

意思就是:百分比与背景区域和背景的尺寸有关。

具体计算公式是:

|(背景区域 - 背景图片)x 百分比 |

如果background-position:50%,计算就是:

|(背景区域 - 背景图片)x 50% |

img

随着看文档又发现其参数值还可以传递三个或四个,前提是百分比和数值之前要有关键词(top,bottom,left,right)。

三个参数:

background-position:bottom 10px right;

background-position:bottom right 10px;

没有提供的数值默认为零。

四个参数:

background-position:bottom 10px right 10px;

在距离右下角10x10位置显示背景图片。

以后如果知道距离背景区域,右下角多少就可以直接写,而不要再算距离区域左上角多少然后再写。

下面附一些代码:

background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */


body { background: url("banner.jpeg") right top }    /* 100%   0% */
body { background: url("banner.jpeg") top center }   /*  50%   0% */
body { background: url("banner.jpeg") center }       /*  50%  50% */
body { background: url("banner.jpeg") bottom }       /*  50% 100% */

参考:

http://css-infos.net/property/background-position

分享到: