background:url(./images.png) no-repeat 0 center的用法


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
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯系作者獲得授權並注明出處。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM