background 你瞭解嗎

寫頁面時，咱們常常用到 background ，那麼關於它的深層屬性，你知道多少呢？

關於background 的基本經常使用屬性無非就是

background-color:pink;              <!-- 背景色 -->
background-image:url(../1.png);    <!-- 背景色 -->
background-repeat:repeat/repeat-x/repeat-y/no-repeat; <!-- 平鋪方式 -->


背景圖的顯示原則：
　　　　　　　　容器尺寸 = 圖片尺寸 ————————— 恰好顯示
　　　　　　　　容器尺寸 > 圖片尺寸 ————————— 默認平鋪，自動鋪滿
　　　　　　　　容器尺寸 < 圖片尺寸 ————————— 只顯示容器內部分

 

　　那麼除此以外，咱們偶爾須要用到background的其它一些屬性，好比：

一、圖片大小超出容器，咱們須要對圖片顯示範圍進行肯定：

background-clip :              <!-- 指示背景的顯示範圍，即裁剪位置 -->

　　　　　　　　　　border-box;　　　　　　<!-- 從容器邊框裁剪 -->

　　　　　　　　　　padding-box;　　　　　　<!-- 從容器內邊距進行裁剪 -->

　　　　　　　　　　content-box;　　　　　　<!-- 從容器內容裁剪 -->

二、對背景圖像開始出現的位置（起點）指定：

background-origin：

　　　　　　　　　　border-box;　　　　　　<!-- 背景圖像相對於邊框盒來定位。 -->

　　　　　　　　　　padding-box;　　　　　　<!-- 背景圖像相對於內邊距框來定位。 -->

　　　　　　　　　　content-box;　　　　　　<!-- 背景圖像相對於內容框來定位。 -->

三、指定背景圖的尺寸：

background-size：auto / 長度值  / 百分比  /  cover (背景圖像徹底覆蓋背景區域,某些部分也許沒法顯示) /  contain (擴展至最大尺寸，以使其寬度和高度徹底適應內容區域)

四、圖像定位：

background-position：值一   值二 ；

值一表示水平位置，可取 left / center / right ; 也可取爲百分比或數值。

值二表示豎直位置，可取 top / mid / bottom ; 也可取爲百分比或數值。

五、背景圖像是否固定或者隨着頁面的其他部分滾動：

background-attachment：
　　　　　　　　　　　　　　scroll； 　　　　<!-- 背景圖片隨頁面的其他部分滾動 -->

　　　　　　　　　　　　　　fixed；　　　　　　<!-- 背景圖像固定  -->

　　　　　　　　　　　　　　inherit；　　　　<!-- 繼承父元素屬性值 -->