background:url(./images.png) no-repeat 0 center; //圖像地址 不重復 水平位置0 垂直位置居中 background:url(./images.png) no-repeat -10px -5px;
background:url(./images.png) no-repeat 0 center;
的意思是 圖像地址 不重復 水平位置0 垂直位置居中
0 center 的意思就是 水平位置0 垂直位置居中
-10px -2px 的意思就是 水平位置-10px 垂直位置-2px
這兩個值和background-position 屬性是一樣的,即設置背景圖像的起始位置。
這個屬性設置背景原圖像的位置,背景圖像如果要重復,將從這一點開始。
默認值:0% 0%
可能的值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right (以上,如果您僅規定了一個關鍵詞,那么第二個值將是"center"。)
x% y% ( 第一個值是水平位置,第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規定了一個值,另一個值將是 50%。)
mpx npx (第一個值是水平位置,第二個值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。如果您僅規定了一個值,另一個值將是50%。)
您可以混合使用 % 和 position 值。
作者:tianlinzhao
鏈接:https://www.jianshu.com/p/a32ce8714b1d
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯系作者獲得授權並注明出處。