一兩個月沒更新博客了，因為放假剛在深圳找了實習，一直都比較忙碌，不過我覺得再忙，還是需要時間去沉淀一些東西，工作的時候別人看到的只是你有沒有實現最終的結果，但自己是否思考，是否去總結，決定着你工作是否輕松。基礎不好的話，很多時候時間都花費在修復各種bug上了。所以思考總結很重要，做出好維護的代碼才能讓我們輕松走天下。找實習還是比較順利的，有空可以分享下經驗。好了，進入正題了，今天分享的是css中的background，平常我們用的都是些常見的屬性，今天來看看一些不常用的，其實還是很有價值的。
我們都知道background是一個復合屬性，我們先來大概看看這些單一屬性。
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
大部分其實都是比較簡單的，今天主要分享下background-size，background-origin，background-clip。其他的可以自行查閱
1 background-size：水平方向 垂直方向，做移動端的時候經常需要用到這個。
屬性值分別有：
1 設置具體的值 。background-size：100px 200px。你設置的多大 背景圖片就有多大，當只設置一個值的時候高度會auto。
2 設置百分數 。background-size：100% 100% ，圖片的寬高 會以容器的寬度為基准，來生成大小。當只設置一個值的時候，高度的值會默認為auto。但不一定會正好就等於圖片的高度顯示出來，我之前做一個移動端就是因為我設置的是background-size：100% ，后來發現背景圖片的高度只顯示了一部分，底部的就是看不到，但我們底部的背景又是需要展現出來的，后來改成background-size：100% 100%就好了。當然如果你的背景的重點不在下面。可以只寫一個100%。
3 background-size： cover，這個就是不會考慮圖片本身的比例，讓圖片能夠把容器充滿，所以很有可能圖像只顯示一部分，因此還是要根據你的需求來看。
如果你需要顯示完整的圖片，最好用background-size：100% 100%，如果圖片的重點在上面，或者只顯示一部分也沒影響，可以用background-size：100% 和background-size： cover。
4 background-size： contain 把圖像圖像擴展至最大尺寸一直到。他們的寬度和高度都能接觸到容器。
建議大家私下都動手試試，區別很明顯。
2 background-clip：以前很少用這個屬性，最近看翻譯成中文的《CSS揭秘》，發現它還是很有用的。這本書也不錯，可以買來看看。
background-clip: border-box|padding-box|content-box;
有三種值，分別是什么呢，先跟着我來看一個例子，假設我們現在要做一個透明的邊框。我們可能會這樣寫
border: 10px solid rgba(0,0,0,0.2);
width: 200px;
height: 200px;
background: #16ff00;
padding：10px；//測試需要
可是看效果，發現並不是我們想象中的樣子，如下，我們會發現邊框實際上是在背景上面的，這是什么原因呢？
這不是一個bug,而是本來就是這樣子，
CSS2中語法規定了背景的渲染模式。就是通過background-clip這個屬性來規定的：
1 默認值是border-box,意思就是背景是從邊框開始繪制的，也就是背景的顏色會包括border+padding+content,（content指的是內容區域），所以下面的背景才包括了邊框。
2 當設置值為padding-box的時候,背景會從padding開始繪制，也就是包括padding+content，
3 設置值為content-box，背景顏色就只包括content了。
OK，那如果我們想實現透明邊框，就讓背景不會從邊框繪制就好了。如下，兩個屬性值都實現了，只是第二個背景只包括內容，所以中間的padding就不會有背景了。大家可以記住這個特性，以很可能會用到。
3 background-origin：這個屬性呢，經常會與上面一個屬性混淆，但其實不是一個東西，background-position這個屬性大家都熟悉吧，規定背景顯示的位置，但是位置總要有個標准來確定吧。這個標准呢，就是由background-origin這個屬性來規定的，有下面三個值，原理跟上面是差不多。也有三個值。
padding-box：默認值。意思就是以padding開始為標准定位。
border-box:以padding開始為標准定位。
content-box:以內容區域為標准定位。
我們來看一個實際的效果，代碼如下：
width: 200px;
height: 200px;
background: url(li-ai-jun.png) no-repeat;
padding: 25px;
border: 10px dotted #000000;
background-repeat: no-repeat;
background-size: 100%;
如下，分別是默認情況，border-box，content-box等情況下的表現，應該一看就懂吧。至於平常能不能用到，就要看業務了。
好啦，今天的分享就到這里了，希望以后能分享更多的經驗，最近也有一些朋友私信給我一些問題。有些可以解決，有些真的也是不太會，因為我也是用到什么研究什么，所以很多可能也無能為力，不過學到的，一定會用大白話分享出來。一起加油吧。
我是沐晴。不見不散。