background-position的值有三种表示方法,分别有不同的含义:
1)百分比 (容器的内容宽度-背景图片的宽度)*对应的百分比 即为图片要移动的距离 如果您仅规定了一个值,另一个值将是 50%。
2)长度值 如:px 、em、rem等 图片直接在默认位置向左、向下移动对应长度值即可
如果您仅规定了一个值,另一个值将是50%。您可以混合使用 % 和 position 值。
3)关键词 top/bottom/right/left/center 如果您仅规定了一个关键词,那么第二个值将是"center"。
1、background-position:0 0;等于background-position:left top;(左上角)
2、background-position:100% 100%;等于background-position:right bottom;(右下角)
3、background-position:-70px -40px;(以左上角为0 0点坐标,向左偏移70px,向上偏移40px)
4、background-position:70px 40px;(以左上角为0 0点坐标,向右偏移70px,向下偏移40px)
5、background-position:50% 50%;等于background-position:center center;(居中显示)
6、说明:
设置或检索对象的背景图像位置。必须先指定 background-image 属性。 该属性定位不受对象的补丁属性( padding )设置影响。 默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。 如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。 对应的脚本特性为 backgroundPosition。