CSS3背景屬性教學(xué)難點(diǎn)透析

黃志剛

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

[關(guān) ? ?鍵 ? 詞] ?盒模型;背景層;背景屬性

[中圖分類號(hào)] ?G712 ? ? ? ? ? ? ? ? ? [文獻(xiàn)標(biāo)志碼] ?A ? ? ? ? ? ? ? ? ? ?[文章編號(hào)] ?2096-0603（2019）27-0149-03

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

一、盒模型中的四種盒子

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

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

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

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

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

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

二、背景和背景層的概念

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

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

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

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

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

背景顏色總是鋪滿整個(gè)背景。可以通過(guò)設(shè)置background-clip屬性裁剪背景，使之適應(yīng)盒模型中不同的盒子大小。

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

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

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

四、背景重復(fù)的雙值語(yǔ)法

在設(shè)置背景圖像的重復(fù)時(shí)，通常使用單值語(yǔ)法，CSS3引入雙值語(yǔ)法，語(yǔ)義更清晰，實(shí)際上單值語(yǔ)法是雙值語(yǔ)法的簡(jiǎn)寫(xiě)。在雙值語(yǔ)法中，第一個(gè)值表示水平重復(fù)行為，第二個(gè)值表示垂直重復(fù)行為。單值語(yǔ)法與雙值語(yǔ)法的對(duì)應(yīng)關(guān)系，見(jiàn)下表。

五、背景圖像的滾動(dòng)模式

使用background-attachment屬性設(shè)置背景圖像的滾動(dòng)模式時(shí)，基于瀏覽器窗口的主視窗和基于元素的局部視窗（如果元素具有滾動(dòng)機(jī)制），會(huì)有不同的滾動(dòng)效果。

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

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

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

六、背景圖像的定位

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

（一）背景圖像鋪設(shè)的開(kāi)始區(qū)域

默認(rèn)情況下，背景圖像在背景層的內(nèi)邊距盒中開(kāi)始重復(fù)鋪設(shè)，直到鋪滿整個(gè)背景。可以通過(guò)background-origin屬性改變背景圖像在背景層平鋪的開(kāi)始區(qū)域（簡(jiǎn)稱定位區(qū)域）有三種，它們是content-box（內(nèi)容盒）、padding-box（內(nèi)邊距盒）或border-box（邊框盒）。注意，background-origin屬性設(shè)置的不是平鋪區(qū)域的大小。

（二）背景圖像鋪設(shè)的開(kāi)始位置

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

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

如果屬性值是單值，則第二個(gè)值默認(rèn)為“center”，實(shí)際上也是“雙值”。

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

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

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

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

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

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

3.開(kāi)始位置的確定方法

background-repeat屬性的默認(rèn)值是repeat，背景圖像總是鋪滿整個(gè)背景，很難看出平鋪的開(kāi)始位置。

當(dāng)把background-repeat的屬性值設(shè)為no-repeat，則背景圖像只平鋪一次，它的顯示位置就是背景圖像平鋪的開(kāi)始位置。

七、背景圖像的裁剪

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

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

八、背景圖像的大小

background-size屬性用來(lái)設(shè)置背景圖片的尺寸，屬性值可以是：

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

2.單值表示寬度，高度值默認(rèn)為關(guān)鍵字值auto。

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

九、多背景

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

每個(gè)背景圖像的大小、位置和平鋪在其他背景屬性中設(shè)置。瀏覽器會(huì)拿這些背景屬性設(shè)置的值與background-image屬性中指定的背景圖像匹配，多余的值不使用。如果屬性沒(méi)有指定足夠的逗號(hào)分隔值來(lái)匹配層數(shù)，則通過(guò)重復(fù)使用屬性值，直到足夠?yàn)橹埂Ｈ缬邢铝幸唤M申明：

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屬性共設(shè)置了3張背景圖像，形成了3個(gè)背景層。其他背景屬性也必須設(shè)置3個(gè)值與3個(gè)背景層匹配。background-position設(shè)置了4個(gè)值，最后一個(gè)值不使用。background-origin只設(shè)置了兩個(gè)值，從第一個(gè)值開(kāi)始重復(fù)，只重復(fù)一個(gè)值就可以了。background-repeat屬性只設(shè)置了一個(gè)值，從第一個(gè)值開(kāi)始重復(fù)兩次。最后，形成以下申明組來(lái)設(shè)置多背景。

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é)論

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

參考文獻(xiàn)：

[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.

編輯 馮永霞