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)