导航位置：首页 > 技术开发 > 前端技术开发
css背景图片位置控制 主要使用position的属性实现位置定位
豆腐果2020-03-03围观：点赞：
在做CSS背景图片的时候，有时候经常会遇到背景图片的定位，其实CSS有个position来实现定位，而不仅仅是top\center之类。position有两个参数：水平方向的位置，垂直方向的位置。
具体例子如下：
1.background:url(../image/img.jpg) no-repeat left top; /*相当于0% 0%*/
表示背景图片在指定div的位置，从左上角开始
2.background:url(../image/img.jpg) no-repeat right bottom; /*相当于100% 100%*/
表示背景图片从指定div的右下角开始显示图片，并且背景图片右下角与div的右下角重合
3.background:url(../image/img.jpg) no-repeat 300px 200px;
即背景图片距div的左边界300px，距div的上边界200px。
4.background:url(../image/img.jpg) no-repeat 50% 50% ;
/* 相当于background:url(../image/img.jpg) no-repeat center ; */
背景图片在div中水平方向与竖直方向都居中显示
5.background:url(../image/img.jpg) no-repeat 300px; /*相当于300px 50%*/
若只写一个参数，则另一个参数默认为50%，即背景图片距div的左边300px，而竖直方向居中。
6.background:url(../image/img.jpg) no-repeat -300px -100px ;
背景图片相对于div左上角（0px，0px） 又向左移动了300px，向上移动了100px
7.background:url(../image/img.jpg) no-repeat 30% 30%;
背景图片的（30%， 30%）的点与其所属的div的（30%， 30%）的点对齐。