background-position背景定位 · css3

``` background-position ``` 背景定位作用：设置背景图（常用于不重复的背景图）在盒模型中的加载位置 ## 属性值：单词表示法，像素表示法，百分比表示法 ## 无论哪种表示方法都有2个值进行设置，中间用空格隔开第一个属性值：描述的是背景图在盒子中水平方向的位置第二个属性值：描述的是背景图在盒子中垂直的位置 ## 1.单词表示法：两个属性都是使用单词表示定位的方向第一个属性的可以选值：（left）（ center）（right）分别表示图片在水平方向居左，居中，居右第二个属性的可选值：（top）（center）（ bottom）分别表示图片在垂直方向居上，居中，居下书写时，可以在两个方向中挑任意组合。如果页面中盒子的位置是固定的并且比背景图片要小，此时会提供一种解决方案，就是展示核心区域。网页中会出现大的居中banner图使用居中会比较好的布局 ## 2.像素表示法背景定位的两个属性值都素以px为单位的数值。第一个属性值：表示水平方向，图片距离盒子左上角border以内的顶点距离。第二个属性值：表示垂直方向，图片距离盒子以内的顶点距离像素值可以为负数正数：表示图片从左上顶点为参考点向右，下进行移动负数：表示图片从左上顶底为参考向左，上进行移动 ## 百分比表示法：水平方向：100%等于(盒子的width)减去图片宽度垂直方向： 100%等于(盒子的width)减去图片的高度代码如下： ``` *{ margin: 0; padding: 0; } div{ width:400px; height:400px; border: 1px solid red; margin:100px auto; background-image: url(./23.jpg); background-repeat: no-repeat; background-position:140px 140px; } </style> </head> <body> <div></div> </body> </html> ``` 效果： ![](https://img.kancloud.cn/17/fb/17fb2435417bb1d982fa5e1e5bfb6dfa_767x677.png)