§ ITPOW >> 文档 >> CSS

作者：vkvi 来源：ITPOW（原创） 日期：2010-3-20

相信也有不少朋友跟我一样，曾经都对 background-position 产生过错误的理解。

background-position:0% 0%;

这表示背景图片的左上角与容器的左上角对齐？的确是这个现象，但话不能这么说，因为 background-position 计算位置时用的并不是背景图片的左上角作为基点。

background-position 是将背景图片的中心点作为基点

那 background-position 的两个参数又是指相对于容器的哪个地方呢？

如上图，容器是 400px * 400px，背景图片是 200px * 200px，上图是：background-position:50% 50%。

• 那么 background-position:0% 0% 时：第一个 0% 就代表背景图片的中心点与左边红线重合；第二个 0% 就代表背景图片的中心点与上边红线生命。
• 那么 background-position:100% 100% 时：第一个 100% 就代表背景图片的中心点与右边红线重合；第二个 100% 就代表背景图片的中心点与下边红线生命。

也就是说在 0%-100% 之间，图片的中心点被限制在一个范围内：

• 这个范围距离容器左边缘右边缘均是背景图片宽度 / 2。
• 这个范围距离容器上边缘下边缘均是背景图片高度 / 2。