黃志剛

[摘 ? ? ? ? ? 要] ?背景屬性一直是網(wǎng)頁設計類課程需講授的重點內(nèi)容，在引入CSS3后，它的某些特征更是難以理解，成為教學中的難點。從元素的盒模型出發(fā)，引出背景和背景層的概念，闡明三種盒子區(qū)域與背景的關系，在多背景下背景顏色所在的背景層。重點闡述背景圖像在雙視窗下不同的滾動效果，平鋪及平鋪的開始區(qū)域和開始位置，同時，闡述背景圖像大小的設置和背景的裁剪。

[關 ? ?鍵 ? 詞] ?盒模型;背景層;背景屬性

[中圖分類號] ?G712 ? ? ? ? ? ? ? ? ? [文獻標志碼] ?A ? ? ? ? ? ? ? ? ? ?[文章編號] ?2096-0603（2019）27-0149-03

CSS（Cascading Style Sheets）即層疊樣式表，是用于描述結構化文檔顯示效果的語言。CSS語言的演變經(jīng)歷了CSS1、CSS2、CSS2.1和CSS3等版本。CSS3是CSS的第三個升級版本，它是一系列規(guī)范的總稱。W3C（World Wide Web Consortium，萬維網(wǎng)聯(lián)盟）的候選推薦標準“CSS Backgrounds and Borders Module Level 3（CSS背景與邊框第三級）”是CSS3中的一個規(guī)范。它在CSS2.1的基礎上擴展了原有的背景屬性，新增了3個背景屬性。背景屬性用來指定背景顏色或指定背景圖像以及背景圖像的尺寸、定位和平鋪，每一個元素的背景層要么完全透明，要么被顏色和圖像填充，可以同時指定背景顏色和背景圖片，背景圖像也可以是一張或多張。背景屬性一直是網(wǎng)頁設計類課程講授的重點內(nèi)容，特別是在引入CSS3后，背景屬性的某些特征難以理解，成為教學中的難點內(nèi)容。

一、盒模型中的四種盒子

瀏覽器將HTML文檔中的每一個元素都渲染為一個矩形，顯示在網(wǎng)頁中。它由內(nèi)容區(qū)域和可選的內(nèi)邊距區(qū)域、邊框區(qū)域和外邊距區(qū)域從里到外依次環(huán)繞構成，如下圖所示，這種顯示結構就叫作盒模型。其中，每個區(qū)域的尺寸可以通過相應的CSS屬性設置。盒模型的矩形區(qū)域從里到外逐層擴展可以構成內(nèi)容盒、內(nèi)邊距盒、邊框盒和外邊距盒四種盒子。

1.內(nèi)容盒，指顯示元素內(nèi)容的矩形區(qū)域，用關鍵字“content-box”表示，內(nèi)容的邊界即為內(nèi)容盒的邊緣。

2.內(nèi)邊距盒，指由內(nèi)容區(qū)域和內(nèi)邊距區(qū)域構成的矩形區(qū)域，用關鍵字“padding-box”表示，內(nèi)邊距的外邊界即為內(nèi)邊距盒的邊緣。

3.邊框盒，指由內(nèi)容區(qū)域、內(nèi)邊距區(qū)域和邊框區(qū)域構成的矩形區(qū)域，用關鍵字“border-box”表示，邊框的外邊界即為邊框盒的邊緣。

4.外邊距盒，指由內(nèi)容區(qū)域、內(nèi)邊距區(qū)域、邊框區(qū)域和外邊距區(qū)域構成的矩形區(qū)域，用關鍵字“margin-box”表示，外邊距的外邊界即為外邊距盒的邊緣。

content-box、padding-box、border-box是與背景屬性相關的三個關鍵字值，用來表示背景鋪設或剪切的三個區(qū)域。

二、背景和背景層的概念

元素的背景是指在邊框盒下層與邊框盒大小相等的區(qū)域，也就是說背景繪制在內(nèi)容、內(nèi)邊距和邊框之下，邊框會覆蓋背景，但內(nèi)容區(qū)域和內(nèi)邊距區(qū)域默認是透明的，所以，我們總可以在內(nèi)邊距區(qū)域和內(nèi)容的縫隙間看到背景。如果將元素盒模型（不包括外邊距盒）的結構映射到背景，那么背景也可以劃分為內(nèi)容盒、內(nèi)邊距盒和邊框盒三個區(qū)域，在所有與背景相關的屬性中，我們也用content-box、padding-box和border-box指代背景中的相應區(qū)域。注意，背景層沒有外邊距盒。

可以通過background-color和background-image兩個屬性分別設置在背景中顯示的顏色和圖像，默認情況下，背景顏色和圖片總是鋪滿整個背景。

在CSS3中背景可以有多層（用于多背景圖像，一個背景層放一張），層的數(shù)量取決于background-image屬性中用逗號分隔的值的數(shù)量。需要注意的是，默認情況下，即使沒有設置背景屬性，瀏覽器也為網(wǎng)頁中的每個元素創(chuàng)建了一個背景層。

三、背景顏色及其所在的背景層

background-color屬性用來設置元素的背景顏色。其實，即使沒有設置背景顏色，瀏覽器也為每一個元素初始化了一個背景層和一種背景顏色。背景顏色值是“transparent”（透明的），所以，我們感覺不到它的存在。

背景顏色總是鋪滿整個背景?？梢酝ㄟ^設置background-clip屬性裁剪背景，使之適應盒模型中不同的盒子大小。

在多層背景中，背景顏色總是被繪制在所有圖像下，而且只能設置在最底層圖像層，如下：

background-image： url（1.png）， url（2.png）， #990 url（3.png）;

“#990 url（3.png）”就是最底層圖像層，設置了顏色“#999”。在其他圖像層設置的顏色無效。

四、背景重復的雙值語法

在設置背景圖像的重復時，通常使用單值語法，CSS3引入雙值語法，語義更清晰，實際上單值語法是雙值語法的簡寫。在雙值語法中，第一個值表示水平重復行為，第二個值表示垂直重復行為。單值語法與雙值語法的對應關系，見下表。

五、背景圖像的滾動模式

使用background-attachment屬性設置背景圖像的滾動模式時，基于瀏覽器窗口的主視窗和基于元素的局部視窗（如果元素具有滾動機制），會有不同的滾動效果。

如果background-attachment屬性的取值為“fixed”，則背景圖像相對于兩個視窗都是固定的，可以把背景圖像想象為附著在可視區(qū)域。在主視窗中，即使元素滾動，背景圖像不會動;在局部視窗中，內(nèi)容滾動，背景圖像也不會動。

如果background-attachment屬性的取值為“scroll”，則背景圖像相對于元素本身固定，可以把背景圖像想象為附著在元素邊框上。在主視窗中，背景圖像隨元素滾動;在局部視窗中，即使內(nèi)容滾動，背景圖像保持不動。

如果background-attachment屬性的取值為“l(fā)ocal”，則背景圖像相對于元素內(nèi)容固定，可以把背景圖像想象為附著在元素內(nèi)容上。在主視窗中，背景圖像隨元素滾動;在局部視窗中，背景圖像隨內(nèi)容滾動。

六、背景圖像的定位

背景圖像的定位是指設置背景圖像從背景的哪個區(qū)域以及這個區(qū)域的哪個位置開始鋪設。

（一）背景圖像鋪設的開始區(qū)域

默認情況下，背景圖像在背景層的內(nèi)邊距盒中開始重復鋪設，直到鋪滿整個背景?？梢酝ㄟ^background-origin屬性改變背景圖像在背景層平鋪的開始區(qū)域（簡稱定位區(qū)域）有三種，它們是content-box（內(nèi)容盒）、padding-box（內(nèi)邊距盒）或border-box（邊框盒）。注意，background-origin屬性設置的不是平鋪區(qū)域的大小。

（二）背景圖像鋪設的開始位置

確定了背景圖像鋪設的開始區(qū)域后，就要確定它從這個區(qū)域的哪個位置開始鋪設。默認的開始位置是定位區(qū)域的左上角，可以通過設置background-position屬性的屬性值來改變背景圖像平鋪的開始位置。其屬性值由最少1個最多4個空格分隔的值構成，用來表示背景圖像在定位區(qū)域的水平位置和垂直位置。值的類型可以是百分數(shù)值、長度值和關鍵字值，百分數(shù)和長度值可以為正數(shù)、零或負數(shù)。關鍵字值有top、right、bottom、left和center，分別表示定位區(qū)域的頂部邊緣、右邊緣、下部邊緣、左邊緣和兩條對邊的中線位。

1.用單值或雙值定位背景圖像

如果屬性值是單值，則第二個值默認為“center”，實際上也是“雙值”。

CSS為雙值定義了一個特定的二維坐標系。它的原點在定位區(qū)域的左上角，水平向右是X軸的正方向，垂直向下是Y軸的正方向。在雙值中，第一個值表示水平方向的位置（也常表述為相對定位區(qū)域左邊緣的偏移），第二個值表示垂直方向的位置（也常表述為相對定位區(qū)域頂部邊緣的偏移）。如果位置值是長度值，則表示固定長度的偏移量;如果位置值是百分數(shù)，如X%，則表示相對偏移量，按照圖像的X%處的點（以圖像的左上角為原點）與定位區(qū)域的X%處的點（以定位區(qū)域的左上角為原點）對齊的規(guī)則進行定位。如果在雙值中出現(xiàn)了關鍵字值，則left和right分別是水平位置的0%和100%，top和bottom是垂直位置的0%和100%。

如“background-position：10% 20px”表示在水平方向按對齊規(guī)則定位，即背景圖像10%處的點與定位區(qū)域10%處的點對齊;在垂直方向上，按固定長度定位，即背景圖像的頂部邊緣相對于定位區(qū)域頂部邊緣的偏移是20px的固定長度。

2.用三值和四值定位背景圖像

如果是三值，則缺失的偏移值默認為零，實際上也是“四值”。四值語法是指在一個關鍵字值（不含center）后指定一個百分數(shù)和長度值，關鍵字指定偏移相對的方位。如“background-position： bottom 10px right 20px”表示背景圖像的底部邊緣相對于定位區(qū)域底部邊緣的偏移是10px的固定長度，背景圖像的右邊緣相對定位區(qū)域的右邊緣的偏移是20px的固定長度。

要注意的是，用四值定位時，正值是表示從定位區(qū)域邊緣向內(nèi)部的偏移，負值是從定位區(qū)域邊緣向外部的偏移。

不難看出，雙值定位是四值定位的簡寫，如“background-position： 10% 20px”也可以寫成“background-position： left 10% top 20px”。雙值偏移的相對方位是固定的，水平總是相對于左邊緣，垂直總是相對于頂部邊緣。

3.開始位置的確定方法

background-repeat屬性的默認值是repeat，背景圖像總是鋪滿整個背景，很難看出平鋪的開始位置。

當把background-repeat的屬性值設為no-repeat，則背景圖像只平鋪一次，它的顯示位置就是背景圖像平鋪的開始位置。

七、背景圖像的裁剪

鋪滿整個背景的背景圖像，可以通過設置background-clip屬性的值來裁剪，改變背景圖像所占的區(qū)域。

如果background-clip屬性的取值為border-box，則瀏覽器會沿邊框盒邊緣裁剪背景;取值為padding-box，則沿內(nèi)邊距盒邊緣裁剪背景;取值為content-box，則沿內(nèi)容盒邊緣裁剪背景。

八、背景圖像的大小

background-size屬性用來設置背景圖片的尺寸，屬性值可以是：

1.關鍵字值cover或contain。cover表示保持圖像的寬高比例，將圖片縮放到最小的尺寸，使其寬度和高度都能完全覆蓋背景定位區(qū)域;contain表示保持圖像的寬高比例，將圖片縮放到寬度或高度正好適應背景定位區(qū)域。

2.單值表示寬度，高度值默認為關鍵字值auto。

3.雙值分別表示寬高，值的數(shù)據(jù)類型可以是百分數(shù)、長度和關鍵字值auto。百分數(shù)是相對于背景定位區(qū)域，auto表示保持圖像的寬高比例，縮放圖像的寬度和高度。

九、多背景

background-image屬性可以設置一個或多個背景圖像，形成多背景。圖像以Z方向堆疊的方式進行繪制，先指定的圖像繪制在上面，邊框繪制在所有背景圖像之上，背景顏色繪制在所有背景圖像之下。

每個背景圖像的大小、位置和平鋪在其他背景屬性中設置。瀏覽器會拿這些背景屬性設置的值與background-image屬性中指定的背景圖像匹配，多余的值不使用。如果屬性沒有指定足夠的逗號分隔值來匹配層數(shù)，則通過重復使用屬性值，直到足夠為止。如有下列一組申明：

background-image： url（flower.png）， url（ball.png）， url（grass.png）;

background-position： center center， 20% 80%， top left， bottom right;

background-origin： border-box， content-box;

background-repeat： no-repeat;

background-image屬性共設置了3張背景圖像，形成了3個背景層。其他背景屬性也必須設置3個值與3個背景層匹配。background-position設置了4個值，最后一個值不使用。background-origin只設置了兩個值，從第一個值開始重復，只重復一個值就可以了。background-repeat屬性只設置了一個值，從第一個值開始重復兩次。最后，形成以下申明組來設置多背景。

background-image： url（flower.png）， url（ball.png），url（grass1.png）;

background-position： center center， 20% 80%， top left;

background-origin： border-box， content-box， border-box;

background-repeat： no-repeat， no-repeat， no-repeat;

十、結論

破解背景屬性的難點：首先，需要深入理解盒模型、背景和背景層的概念及其關系;其次，要深入研究背景屬性的語法細節(jié);最后，通過多練習加深理解。在互聯(lián)網(wǎng)上有許多關于背景屬性的博文，有些博文的觀點在理解上有錯誤，切不可人云亦云，一定要實際驗證。CSS3擴展了CSS2.1屬性的特征，并引入了新的背景屬性，要特別注意這些屬性的關系。

參考文獻：

[1]W3C.CSS Backgrounds and Borders Module Level 3 W3C Candidate Recommendation， 17 October 2017. [EB/OL].https：//drafts.csswg.org/css-backgrounds-3/#backgrounds.

[2]Mozilla.Changing background styles using CSS.[EB/OL].https：//developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds.

[3]Chris Coyier.background-attachment.[EB/OL].https：//css-tricks.com/almanac/properties/b/background-attachment/.

[4]Eric A. Meyer.CSS： The Definitive Guide[M].Published by OReilly Media， Inc，June 2017：1127-11143.

編輯 馮永霞