规则1: background-position:xpx ypx;
为正值时:背景图片的左上顶点超右下移动直至距离div的左上顶点为xpx ypx;
规则2: background-position:-xpx -ypx;
为负值时:背景图片的左上顶点超左上移动直至距离div的左上顶点为xpx ypx;
规则3: background-position:x% y%;
背景图片的x% y%所在的那一点和div的x% y%所在的那一点重合时的效果;
有时候这一点不是能容易的一眼看出,可能还要稍微计算一下。通常情况下规则1/2是最简单易行的。
在chrome中测试,当页面缩放的时候,规则1/2和3的背景图片都会跟着一起缩放。
规则4: background-position:left bottom;
把left看作0%,bottom看作100%后同规则3一致。
时间: 2024-10-05 17:18:54