在css中如果想要设置背景图的位置,就需要设置background-position 属性值 ;
background-position 属性值 可以是 length 长度 , 也可以是 position 方位 ;
在一个固定大小盒子中,如果盒子大小大于图片的大小,那么背景图会置于盒子的左上角的位置。
CSS的语法格式如下:
background-position : length length
background-position : position position
其中length 长度设置的数值如下写法 :
百分数 : 如 50% ;
浮点数 + 单位 : 如 : 150.5px ;
position 方位设置的属性如下 :
左上右下 : top , bottom , left , right ;
中间 : center
其中注意:设置的是 x 坐标的方位 和 y 坐标的方位 , 二者使用空格隔开 ;
注意事项:
- 设置背景图片 : 设置 background-position 属性值 之前 需要先设置 background-image 背景图片属性
- 方位设置 : 如果设置 position 方位属性值 , 设置的是 x 坐标的方位 和 y 坐标的方位 , 使用空格隔开
- 顺序无关 : 如果指定了两个方位值 , 则 自动匹配顺序 , 先后顺序无关
- 设置一个值left、right、top : 如果 只设置了一个方位值 , 那么另外一个默认居中对齐
- 设置了 left , 则垂直方向居中对齐 ;
- 设置了 top , 则水平方向居中对齐 ;
- 坐标(x,y)设置 : 如果 设置的是 length 长度坐标 , 则 第一个数值是 x 坐标 , 第二个数值是 y 坐标
- 设置了一个值 : 如果 只设置了一个坐标值 , 那么该设置为 x 坐标设置 , 垂直方向默认居中设置
- 同时设置放位和坐标 : 第一个值默认是 x 坐标 , 第二个值为 y 坐标