css background-position和background-size以及clip屬性

今天聊一聊css背景屬性的background-position和background-size以及clip三個屬性。

background-position：(0%,0%)爲默認值
這個屬性，看它字面意思就知道啦，用來定位背景顯示的位置。既然是定位，天然而然咱們就想到了top和left，
對比於position屬性，在這裏咱們能夠用如下方式來使用background-position：

一、直接使用定位關鍵詞如"right","center","top","left"等，形如background-
position:center left;若是隻設置一個值，另外一個值默認爲center;

二、使用百分比，形如background-position:10% 20%;第一個值爲水平值，第二個爲垂直方向值若是隻設置
 一個值，另外一個值默認爲50%；

三、使用px，em等其餘css單位，與百分比使用相似。




background-size:auto爲默認值
這個屬性，是用來控制背景圖片尺寸的。它也有幾種用法：

一、直接使用css單位如px,rem等，形如：background-size:10px 20px;第一個數值用來肯定寬度，第二個
值用來肯定高度。

二、使用百分比與使用單位相似，是以父元素爲基準。

三、關鍵詞cover,background-size:cover;顧名思義，這個屬性會讓背景圖片徹底覆蓋元素空間。咱們能夠
這樣理解，將一張圖片等比例放大，直到這張圖片可以徹底將元素空間徹底覆蓋時，就是此時cover定義的背景
尺寸了。

四、關鍵詞contain，background-size:contain;contain屬性與cover不一樣，仍然是等比例拉大背景圖片
可是，contain屬性是在圖片的寬度或者高度其中之一和元素的寬度和高度一致時，此時的尺寸就是背景的尺寸
也就是說，圖片會被放大到容器可以徹底顯示它的最大尺寸。




最後，咱們來看一個用clip屬性搭配js腳本實現的效果：

咱們看到圖片中的導航條，文化二字被「切割」了，一部分是黑色，一部分是白色。這是怎麼作到的呢？訣竅在於
使用clip屬性，clip用來裁剪絕對定位元素，被切掉的部分相似於overflow：hidden，也就是說在頁面上是
看不見的。這個效果，其實用了兩個同樣的導航重疊在一塊兒，而後經過js腳本根據滾動來實時設置clip屬性的值
nav1裁剪掉下部分，nav2裁剪掉上部分，這樣看來就實現了圖片的效果。

因爲文字描述比較難懂，這裏貼出有圖中效果的某網址，供各位參考～～
點擊這裏：http://www.sketchin.ch/en/