在css裡面，每個元素盒子都可以想象成由兩個圖層組成。
前景層：內容（如文字或）和邊框。
背景層：用實色填充（使用 background-color 屬性），也可以包含任意多個背景（使用 background-image 屬性），背景疊加在背景顏色之上。
在 css3 被瀏覽器實現程式設計客棧之前，只能在背景顏色上新增一張。而現在，我們可以為背景圖層新增多張（以及 css3 漸變）。
css背景屬性：
程式設計客棧 background-color
background-image
background-repeat
background-p程式設計客棧osition
background-size
background-attachment
background（簡寫屬性）
background-clip、background-origin、background-break（目前尚未得到廣泛支援）
背景顏色
格式：background-color: 顏色值;
示例：background-color: #caebff;
背景格式：background-image:url(路徑/檔名);
示例：background-image:url(images/blue_circle.png);
預設情況下背景會 以元素左上角為起點，沿水平和垂直方向重複出現，最終填滿整個背景區域。
背景重複
格式：background-repeat: repeat | repeat-x | repeat-y | no-repeat;
示例：background-repeat:repeat-x;
說明： repeat 預設值，水平和垂直方向都重複，直至填滿元素的背景區域為止。
repeat-x 水平方向重複。
repeat-y 垂直方向重複。
no-repeat 任何方向上都不重複（只讓背景顯示一次）。
背景位置
用於控制背景位置的 background-position 屬性，是所有背景屬性中最複雜的。
該屬性有5個關鍵字值，分別是 top、left、bottom、right 和 center，這些關鍵字中的任意兩個組合起來都可以作為該屬性的值。
background-position 屬性同時設定元素和的原點。原點決定了元素和中某一點的水平和垂直座標。預設情況下，background-position的原點位於左上角。
第一種情況，使用關鍵字來設定位置。background-position屬性的預設值 top、left 控制著水平和垂直方向重複的起點。如修改 起點位置：p#center （簡化寫法：background-position:center，設定乙個關鍵值，則另乙個也會取相同的值。），背景就會以段落的中心點為起點。
第二種情況，使用百分比來設定位置。
示例：background-position:50% 50%;，再把 background-repeat 設定為 no-repeat，就能實現了在背景區域內居中的效果。第乙個值表示水平位置，第二個值表示垂直位置。要是只設定乙個值，則將其用來設定水平位置，而垂直位置會被設為 center。
第三種情況，使用絕對或相對單位的數值。要是使用畫素單位來設定位置，那麼的左上角會被放在距離元素左上角指定位置的地方。另外，還可以使用負值，這樣可以把的左上角定位到元素外部，從而在元素中只能看到部分。當然也可以給設定足夠大的正值，把的右下角推到元素外部實basnic現同樣的效果。
背景尺寸
background-size 是 css3 規定的屬性，用來控制背景的尺寸。
可設定的值和含義如下：
50%：縮放，使其填充背景區的一半。
100px 50px：把調整到 100 畫素寬，50 畫素高。
cover：拉大，使其完全填滿背景區；保持寬高比。
contain：縮放，使其恰好適合背景區；保持寬高比。
注意：把很小的拉大會導致質量失真。
背景粘附
background-attachment屬性控制滾動元素內的背景是否隨元素滾動而滾動。
屬性值有：
scroll。背景隨元素移動。
fixed。背景不會隨元素滾動而移動。
提示：background-attachment:fixed 最常用於給 body 元素中心位置新增淡色水印，讓水印不隨頁面滾動而移動。
簡寫背景屬性
示例：body
說明：宣告中少寫了哪個屬性的值（比如沒寫 no-repeat），就會使用相應屬性的預設值（ repeat）。
多背景css3 可以給元素背景新增多個背景。
示例：css code複製內容到剪貼簿
背景漸變
漸變，就是在一定長度內兩種或多種顏色之間自然的過渡。
提示：漸變是 css 幫我們生成的背景。新增漸變可以使用 background-image 屬性，也可以使用簡寫 background 屬性。
漸變分兩種：
線性漸變。從元素的一端延伸到另一端。
放射性漸變。從元素內一點向四周發散。
廠商字首
為鼓勵瀏覽器廠商盡早採用 w3c 的 css3 推薦標準，於是就產生了 vsp（vendor specific prefixes，廠商字首）的概念。
示例：transform 屬性的標準語法是這樣的：
transform: skewx(-45deg);
由於這個屬性還沒有完全定案，為保證在大多數瀏覽器以及它們的實驗性實現中能夠使用這個屬性，應該針對想要支援的瀏覽器為該屬性新增 vsp。每個瀏覽器只使用各自能理解的屬性宣告：
css code複製內容到剪貼簿
以下 css3 屬性必須加 vps：
css code複製內容到剪貼簿
本文標題: css中的背景部分程式設計學習教程
本文位址: /web/css/83617.html
CSS教程 3 通過例項學習CSS背景
本教程一共三個例子www.cppcns.com 1 如何重複背景影象 2 如何在垂直方向重複背景影象 3 如何在水平方向重複背景影象.程式設計客棧 本教程一共三個例子 1 如何重複背景影象 2 如何在垂直方向重複背景影象 3 如何在水平方向重複背景影象。參考我們關於css背景的理論知識 css教程 ...
CSS的注釋部分程式設計引申
css注釋 就像html教程中描述的一樣,在css文件中注釋也起到很重要的作用,可以幫助我們記起css的含義,載入在html文件的位置等.css注釋的開始使用 結束使用 css注釋語法 css code複製內容到剪貼簿 風格建議 我使用行寬不超過 80 位元組的文件塊風格注釋 css code複製內...
學習css的部分總結
css 一.css概述 html 控制樣式的弊端 相同的樣式效果，通過不同的屬性或標記來完成的 程式 可維護性 可重用性 不高 通過 css 解決上述問題 可以讓 各個元素 都使用統一的 樣式宣告 從而提高程式的可重用性和可為維護性 什麼是css css cascading style sheet ...