[摘 要] 背景是CSS盒模型最常用的屬性之一，合理的使用背景不僅可以更好地美化頁面，也可以更加有效地實現(xiàn)所需的布局效果。隨著自適應(yīng)網(wǎng)站的流行，背景的作用越來越突出，也成為使用頻率最高的屬性之一。重點研究盒模型背景的應(yīng)用技巧。

[關(guān) 鍵 詞] 邊框；盒模型；圖片；邊框

[中圖分類號] G712 [文獻(xiàn)標(biāo)志碼] A [文章編號] 2096-0603（2016）34-0031-01

一、前言

背景是網(wǎng)頁制作中最常用的屬性之一，無論是顏色還是圖片，都被大量的用作背景。作為盒模型重要的組成部分，背景在網(wǎng)頁的美化及布局中都承擔(dān)著重要的任務(wù)。從CSS2時代開始，背景就具備了強(qiáng)大的功能，能滿足一般的網(wǎng)頁制作需求。到了CSS3，背景增加了一些實用的功能，例如，多圖背景、漸變背景等。本文針對盒模型的背景屬性做一個詳細(xì)的技術(shù)分析。

二、背景屬性詳解

在CSS中，與背景有關(guān)的屬性都以background開頭，算上CSS2有的5個屬性與CSS3新增的3個屬性，背景一共涉及8個屬性。

（一）背景顏色（background-color）

背景顏色是指用純色作為背景，依據(jù)顏色的取值，背景可以使用多種模式設(shè)置純色彩，如十六進(jìn)制background-color：#f00；也可以使用rgba值設(shè)置具有透明度的顏色。

（二）背景圖片（background-image）

背景圖片是指用圖片作為盒元素的背景。例如，將bg.jpg圖片作為背景background-image：url（images/bg.jpg）；到了CSS3，此屬性被強(qiáng)化了，允許一個盒元素可以設(shè)置多個背景圖片，并按從上往下的順序疊加。

（三）背景鋪排（background-repeat）

背景鋪排屬性是專門針對圖片背景配合使用的。背景圖片默認(rèn)填充方式為平鋪排列repeat，起點為盒元素左上角，當(dāng)盒面積大于背景時，圖片將會在垂直和水平方向上重復(fù)排列填滿盒子，但不確保圖片的完整性；當(dāng)盒面積小于圖片時，圖片填滿盒子，同時不確保圖片的完整性。

（四）背景吸附（background-attachment）

此屬性也是針對圖片背景所設(shè)置。設(shè)定圖片背景是否跟隨內(nèi)容一起移動或是固定，共有3個值。fixed讓背景相對窗體固定，scroll讓背景相對于所在盒元素固定，CSS3新增一個值local，讓背景相對于內(nèi)容固定，也就是跟隨內(nèi)容一起滾動。

（五）背景位置（background-position）

背景位置主要設(shè)置的是背景圖片平鋪的起點坐標(biāo)。背景平鋪默認(rèn)以盒元素左上角為起點，有時為調(diào)整圖片平鋪的效果，需要改變起點位置。

（六）背景范圍（background-origin）

背景范圍是CSS3新增的一項背景屬性，指背景平鋪覆蓋的范圍，默認(rèn)情況下，背景是從內(nèi)邊距（padding）開始填充，不包含邊框，設(shè)置為background-origin：padding-box。

（七）背景剪裁（background-clip）

背景剪裁也是CSS3新增的一項背景屬性，和一般的圖片剪裁并無區(qū)別。剪裁與背景的鋪排方式和范圍沒有關(guān)系，只是按照指定的范圍裁剪已經(jīng)鋪排好的背景，分別有padding-box、border-box、content-box、text四種剪裁方式，前三種比較常規(guī)簡單，最后一種text裁剪比較有意思，是以前景內(nèi)容的形狀作為背景剪裁的范圍，可實現(xiàn)遮罩效果。

（八）背景大?。╞ackground-size）

背景大小同樣是CSS3新增的背景屬性之一，可以實現(xiàn)通過改變圖片尺寸后再近些鋪排，如，將圖片設(shè)置為寬40 px，高20 px進(jìn)行鋪排background-size：40px 20px；而是通過調(diào)整圖片大小實現(xiàn)單張圖片的填充。

三、背景技術(shù)難點詳解

背景屬性中，新增的背景裁剪與漸變色背景具有一定技巧性，下面詳細(xì)講解一下這2個屬性的使用。

（一）背景裁剪的遮罩運(yùn)用

前面提到過，CSS3新增的背景剪裁有一個以前景內(nèi)容形狀作為剪裁范圍的應(yīng)用，這種運(yùn)用可以實現(xiàn)非常常見但又無法在網(wǎng)頁中實現(xiàn)的遮罩效果。

（二）漸變背景的運(yùn)用

CSS3給圖片背景增加的一個重要的功能就是漸變色，漸變色有兩種，線性漸變linear-gradient和徑向漸變radial-gradient，如可將背景設(shè)置為傾斜45度角黑白線性漸變background-image： linear-gradient（45deg，#000，#fff），也可以將背景設(shè)置為黑白徑向漸變background-image： radial-gradient（#000，#fff），如需更多顏色漸變，可以自己添加顏色

四、總結(jié)

背景的功能隨著W3C標(biāo)準(zhǔn)在各個瀏覽器下的逐步兼容統(tǒng)一將會變得越來越強(qiáng)大，用好背景不僅可以提升用戶體驗，也能提高頁面運(yùn)行的效率，值得掌握和運(yùn)用！

參考文獻(xiàn)：

[1]鄭偉.高職院校圖形類專業(yè)實踐教學(xué)研究[J].科技資訊，2010（12）：248.

[2]鄭偉.關(guān)于《網(wǎng)頁設(shè)計與制作》課程標(biāo)準(zhǔn)化建設(shè)實施方案的研究[J].電腦知識與技術(shù)，2016，7（12）：158-159.