CSS學習筆記-background屬性

標籤：style   blog   http   color   io   os   ar   使用   strong   

平常總是使用background的縮寫形式，忽視了各屬性的細節在此進行總結。  background-attachmentW3C：屬性設定背景映像是否固定或者隨著頁面的其餘部分滾動。屬性值：scroll   預設值。背景映像會隨著頁面其餘部分的滾動而移動。fixed    當頁面的其餘部分滾動時，背景映像不會移動。inherit  規定應該從父元素繼承 background-attachment 屬性的設定。  background-positionW3C：屬性設定背景映像的起始位置。其中第一個值為水平位置，第二個值為垂直位置。假設容器寬高為500px，250px，圖片寬高均為100px：使用px等長度單位定位時，圖片的左上方以容器左上方為基準（包括padding）進行位移。如background-position：50px 100px使用百分比定位時，位移的計算公式為：（容器的寬度-圖片的寬度）x value。例如background-position：50% 50%使用關鍵詞定位，可選關鍵詞有left、center、right、top、bottom，分別對應的0 50% 100%。 註：1.使用的時候background-repeat：no-repeat；2.若位移太大，則超出部分將會隱藏；3.使用百分比和長度單位定位時可以使用負值；4.若只指定了一個值，那麼另一個值為50%（center）；5.當background-attachment：scroll時，background-position是相對於容器內容及內邊距左上方定位的（如），而當background-attachment：fixed時，背景定位是根據body的padding-box的左上方定位的，（同樣是background-position：50px 100px）： background-repeatW3C：屬性設定是否及如何重複背景映像。屬性值：repeat     預設。背景映像將在垂直方向和水平方向重複。repeat-x   背景映像將在水平方向重複。repeat-y   背景映像將在垂直方向重複。no-repeat  背景映像將僅顯示一次。inherit    規定應該從父元素繼承 background-repeat 屬性的設定。  background-imageW3C：屬性為元素設定背景映像。預設值為none，需要設定的時候使用url（‘URL‘）。（若使用相對路徑，則路徑為相對於寫此屬性的檔案）  background-colorW3C：屬性設定元素的背景顏色。元素背景的範圍：background-color 屬性為元素設定一種純色。這種顏色會填充元素的內容、內邊距和邊框地區，擴充到元素邊框的外邊界（但不包括外邊距）。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。屬性值：color_name  規定顏色值為顏色名稱的背景顏色（比如 red）。hex_number  規定顏色值為十六進位值的背景顏色（比如 #ff0000）。rgb_number  規定顏色值為 rgb 代碼的背景顏色（比如 rgb(255,0,0)）。transparent 預設。背景顏色為透明。inherit     規定應該從父元素繼承 background-color 屬性的設定。  以下為CSS3新添屬性：（ IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支援。 ） background-clipW3C：屬性規定背景的繪製地區。屬性值：border-box  預設。背景被裁剪到邊框盒。padding-box 背景被裁剪到內邊距框。content-box 背景被裁剪到內容框。  background-originW3C：屬性相對於什麼位置來定位。屬性值：padding-box 預設。背景映像相對於內邊距框來定位。border-box  背景映像相對於邊框盒來定位。content-box 背景映像相對於內容框來定位。 註：當background-attachment：fixed時，無效。（本人測試，是相對於body的padding-box定位的）  background-size W3C：屬性規定背景映像的尺寸。屬性值：length      設定背景映像的高度和寬度。第一個值設定寬度，第二個值設定高度。如果只設定一個值，則第二個值會被設定為 "auto"。percentage  以父元素的百分比來設定背景映像的寬度和高度。第一個值設定寬度，第二個值設定高度。如果只設定一個值，則第二個值會被設定為 "auto"。cover       把背景映像擴充至足夠大，以使背景映像完全覆蓋背景地區。背景映像的某些部分也許無法顯示在背景定位地區中。contain     把映像映像擴充至最大尺寸，以使其寬度和高度完全適應內容地區。這裡區分以下cover和contain：（background-attachment：scroll）                    background-size：cover                              　　　　　　　　　　　　　　 background-size：contain很明顯，當值為cover時，目的是填充滿容器，而當值為contain時，是背景圖不溢出容器時能覆蓋的最大面積。當設定了background-position屬性進行位移時，相當於先進行background-size確定大小，後進行位移，（background-position：50px 100px）                    background-size：cover                               background-size：contain當background-attachment：fixed時，容器變為body。 最後，為了簡便，可以使用 background簡寫聲明所有的background屬性，例如：background: transparent url(black-block.jpg) no-repeat scroll 50px 100px border-box padding-box;屬性順序：background-color | background-image | background-repeat | background-attachment | background-position | background-origin | background-clip註：1.順序能夠替換，但注意當background-origin和background-clip相同時，先出現的設定為background-origin；2.background-size屬性，我一加上就報錯，不知為何。 總的來說，CSS3這些新增屬性賦予了我們更多控制背景的能力。 本文參考http://www.w3school.com.cn/，並結合自己的測試。若有錯誤，懇請指正！ 如果您覺得這文章對您有協助，請點擊【推薦一下】,想跟我一起進步嗎？那就【關注】我吧！

CSS學習筆記-background屬性