這兩天用到background樣式,所以就記錄一下!
首先background:background-color | background-image | background-position | background-attachment | background-repeat
background-color :指定填充背景的顏色
background-image:指定背景圖片
background-position:控制背景圖片在元素中的位置
background-attachment:用戶滾動頁面時圖片的狀態(scroll,fixed,inherit)
background-repeat:是否重複背景圖片
然而,當我看完一篇blog之後,哇塞,原來還有好多新增屬性 ,如下
1,background-clip:border-box | padding-box | content-box | no-clip
背景顯示在border內 | 背景顯示在內補白內 | 只顯示在內容區域 | 無 (具體長啥樣,大家可以去試試,其實我也沒試)
2,background-origin: border-box | padding-box | content-box 以邊框 | 內補白 | 內容盒子爲原點開始計算background-position
3,background-size:contain | cover | 指定大小或百分比
縮小圖片來適應圖片的尺寸 | 擴展圖片來填滿元素 | 指定圖片大小
先說那麼多,其實我只是用到了基礎屬性和background-size,感覺很方便,能夠解決一些問題,如定位圖標,就可以省去使用position定位。
竟然忘記記錄博主的網址了 http://www.chinaz.com/design/2009/0918/92150.shtml點擊打開鏈接