CSS中background-position使用技巧

一.background-position:left top;

　　背景圖片的左上角和容器(container)的左上角對齊，超出的部分隱藏。等同於 background-position:0,0;也等同於background-position:0%,0%;

二.background-position:right bottom;

　　背景圖片的右下角和容器(container)的右下角對齊，超出的部分隱藏。等同於background- positon:100%,100%;也等同於background-positon:容器(container)的寬度-背景圖片的寬度,容器 (container)的高度-背景圖片的高度

三.background-position:500px 15px;。

　　背景圖片從容器(container)左上角的地方向右移500px,向下移15px，超出的部分隱藏。

四.background-position:-500px -15px;。

　　背景圖片從容器(container)左上角的地方向左移500px，向上移15px，超出的部分隱藏。

五.background-position:50% 50%;。

　　等同於left：{容器(container)的寬度—背景圖片的寬度}*left百分比，超出的部分隱藏。等同於right：{容器(container)的高度—背景圖片的高度}*right百分比，超出的部分隱藏。

六.background-position:-50% -50%;。

　　等同於left：-{{容器(container)的寬度—背景圖片的寬度}*left百分比(百分比都取正值)}，超出的部分隱藏。等同於 right：-{{容器(container)的高度—背景圖片的高度}*right百分比(百分比都取正值)}，超出的部分隱藏。

 

總結：利用div大小和十字架原理，能夠用background-position屬性實現大圖裏面摳取小圖。

 

MDN上對<position>值解釋是：一種CSS數據類型，2D座標空間，用來設置相對盒子的座標。

咱們常常使用的background-position的值就是<position>值，最近剛介紹的object-position的值也是<position>值。

<position>值支持1~4個值，能夠是具體數值，也能夠是百分比，也能夠是left, top, right, center, bottom關鍵字。可參考下圖經典示意：

若是偏移沒有相應的關鍵字，則會被認爲是center, 所以，background-position:top center能夠直接寫做background-position:top。

若是同時出現3個值或4個值，則表示能夠指定偏移的相對位置，這是CSS3新特性，現代瀏覽器下才支持。包括：Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+, Safari/iOS 7+ .

例如：

background-position: right 40px bottom 20px;

效果則是：

您能夠狠狠地點擊這裏：background-position 4值效果Demo

哇哦，IE9都支持，應該能夠愉快地使用了吧！抱歉，我要潑點冷水。貌似Android的支持有些糟糕，聽說：Android 4.4才支持，Android 4.0~4.2都不支持。所以，咱們在實現此類效果的時候，可能還須要留一手，以下，使用calc計算：

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

使用calc計算整體來講兼容性好一點，可是，IE9瀏覽器下，根據caniuse的說法，會讓IE9瀏覽器奔潰。

所以，實際使用還須要根據場景分別或hack處理。

 

百分比單位
background-position中的百分比單位是個頗有意思的東西。其表現與CSS中其餘的百分比單位表現都不同。

例如，一個圖片：

img { position: absolute; left: 100%; }

必定是在父容器外部。可是，在<position>值中，倒是不同的表現。

咱們能夠看下這個iframe示意：

其中，上面的妹子是background-position百分比，下面的50%透明的妹子是left百分比，能夠看出二者的定位差別。

這就是爲什麼background-position:100% 100%是定位在容器右下角的緣由。

那<position>值對應的容器座標位置該如何計算呢？

其實是有一個公式的：

positionX = (容器的寬度-圖片的寬度) * percentX;
positionY = (容器的高度-圖片的高度) * percentY;

所以，當background-position:100% 100%時候，實際定位值就是容器尺寸和圖片尺寸的差別，因而，就有了右下角定位效果。

有個這個公式，咱們也能理解百分比負值的一些表現了，比方說你以爲下面兩行CSS對應圖片的表現是？

background-position: -50% -50%;

object-position: -50% -50%

是否是以爲應該是定位在容器的左上角，同時有部分圖片超出容器左上角隱藏不可見，就相似上面這個截圖：

可是，實際上，很差意思，多是會下面這種效果（此截圖來自這裏，您能夠狠狠地點擊）：

接近於下面CSS的效果：

background-position: 40px 10px;

深受傳統百分比定位迷惑的咱們可能一時間會想不通，明明是個負值百分比定位，怎麼會是一個正值效果呢？這不科學啊！

 

可是，咱們套用<position>百分比值計算公式，就豁然開朗了！

由於圖片的尺寸大於容器尺寸，因此：

• (容器的寬度-圖片的寬度) * -50% 的結果是個正值；
• (容器的高度-圖片的高度) * -50% 的結果也是個正值;

因此…… 恩！相信你們都應該懂了！

深更半夜，行爲倉促，錯誤在所不免，歡迎指正，歡迎補充，感謝閱讀！