css3之背景定位
阿新 • • 發佈:2018-10-15
nbsp uda https 效果 nal dfa ack data data- 屬性: background-position: left top || left bottom || right top || right bottom || center center || 像素值 || 百分比
實例:
代碼:
1.設置background-position:left top 代表背景圖片要放在內容區的左上角的位置(默認值)
2. 設置background-position: left; 將背景圖片要放在內容區的左側中間的位置 沒有第二個參數則第二個參數默認為center
設置background-position: left bottom; 將背景圖片要放在內容區的左下角的位置
3. 設置background-position: right; 將背景圖片要放在內容區的右側中間的位置,與left相同,沒有第二個參數則第二個參數默認為center
4. 設置background-position: right top; 將背景圖片要放在內容區的右側上角的位置。
5. 設置background-position: right bottom; 將背景圖片要放在內容區的右側下角的位置。
6. 設置background-position: center; 將背景圖片要放在內容區中間的位置。 與left, right相同,沒有第二個參數則第二個參數默認為center
7. 設置background-position: 一個具體像素值(例如100px); 將背景圖片要放在內容區水平位置100px的位置,即沿x軸平移100px;豎直方向默認為center即y軸居中的位置。
8. 設置background-position: 兩個具體像素值(例如100px 100px); 將背景圖片要放在內容區水平位置100px 垂直位置100px的位置,即沿x軸平移100px,沿y軸平移100px
9. 設置background-position: 一個百分比(例如20%); 將背景圖片要放在內容區水平位置20%的位置。 0%是最左邊 100%是最右邊 中間平分。若只有一個值默認第二個參數為50%。
設置background-position:0%; 的效果(同left):
設置background-position:50%; 的效果(同center):
設置background-position:100%; 的效果(同right):
10. 設置background-position: 兩個百分比(例如20% 20%); 將背景圖片要放在內容區水平位置20%,豎直位置20% 的位置。 第一個參數:0%是最左邊 100%是最右邊 中間平分。第二個參數: 0%是最上邊,100%是最下邊 中間平分。
設置background-position:0% 100%; 的效果(同left bottom):
設置background-position:100% 100%; 的效果(同right bottom):
css3之背景定位