CSS揭祕：3.靈活的背景定位

靈活的背景定位

背景知識：background-position的擴展語法，background-origin，calc()

background-position擴展語法

1. background-position擴展語法： css3 中background-position 語法可以通過在偏移量前指定關鍵字，來設置四條邊的偏移量。

   background-positon: right 20px bottom 10px;
   

background-origin

2. background-origin： css3 中 background-origin 可以指定背景圖片的顯示範圍，默認以padding-box爲準，即padding的外邊沿。此時背景圖片的位置將和padding一致。通常此方案更適合開發需求。

   padding:20px;
   background-origin: content-box;
   background-position: 100% 100%;
   

calc()

3. calc()： 允許填入 任意 + - * / 四則運算組合的表達式。

   background-position: calc(100% - 20px) calc(100% - 10px);
   

擴展：border-box 邊框的外邊沿；padding-box 內邊距的外邊沿； content-box 內容的外邊沿。

原效果

最終效果