1. 程式人生 > >css3之背景定位

css3之背景定位

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之背景定位