```
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>
```
效果:

- 簡介
- 文字三屬性(顏色,字號,字體)
- 盒子三屬性(width , height, background-color)
- CSS引入方法
- CSS選擇器
- css高級選擇器
- CSS的繼承性
- 顏色屬性color
- 字體font-family
- 字號font-size
- 文字在盒子行高 line-height
- 字體加粗font-weight
- 字體樣式font-style
- 文本段落對齊text-align
- 文字修飾(上劃線下劃線中劃線 text-decoration)
- 文字縮進text-indent
- 盒子模型的寬度與高度width,height
- 內邊距padding
- 邊框border
- 外邊距margin
- 清除默認樣式
- 盒子height高度屬性拓展
- 文字在盒子里居中text-align:center
- 盒子在盒子里的水平居中
- margin塌陷
- 標準文檔流display
- 浮動float
- 浮動元素性質
- 浮動貼邊原理
- 浮動元素的標準流問題(文字圍邊效果)
- 清除浮動
- 清除浮動影響二: clear屬性
- 清除浮動overflow方法
- 偽類標簽
- background-color背景顏色屬性
- background-image 背景圖片調用
- background-repeat 背景圖平鋪狀態
- background-position背景定位
- background-attachment背景附著
- background綜合語法
- 相對定位position:relative
- 絕對定位position:absolute
- 定位壓蓋順序
- CSS制作LOGO超鏈接妙招
- CSS公共類的繼承性
- em單位
- 媒體查詢
- flex布局