背景background:

背景可以設(shè)置為顏色和圖片，設(shè)置為圖片時(shí)，可以對(duì)圖片繼續(xù)設(shè)置。

background-color:設(shè)置背景顏色：

其顏色的取值方式前面提到過(guò)，和color的取值一樣，但是默認(rèn)值transparent透明

body {background-color: #332211;}

background-image:設(shè)置背景圖片：

其值為：none默認(rèn)值無(wú)背景、url(圖片地址)，圖片地址無(wú)需加引號(hào)。

body {background-image: url(images/test.jpg);}

漸變色：

background的一個(gè)屬性值，一種顏色向另一種顏色平滑地過(guò)渡的效果，分線性漸變和徑向漸變、角向漸變;

線性漸變語(yǔ)法：

linear-gradient(顏色 起始百分比 , 顏色 結(jié)束百分比),線性漸變默認(rèn)方向是從上到下，若要是改為水平方向的漸變則需要在括號(hào)最前面加to right等方位或角度（45deg）,如：

div {background:linear-gradient(to right,red 0%,yellow 50%,#ff00aa 100%)}

徑向漸變語(yǔ)法：

radial-gradient(顏色 起始百分比 , 顏色 結(jié)束百分比),徑向漸變默認(rèn)方向是從中心內(nèi)到外，若要改變漸變圓心位置則需要在括號(hào)最前面加at top等方位或值（at 10px 20px）

div {background-image:radial-gradient(at top,red 0%,yellow 50%,#ff00aa 100%)}

漸變重復(fù)：

漸變重復(fù)只需要在radial-gradient和linear-gradient前面加前綴repeating，如

div {background-image:repeating-radial-gradient(at top,red 0%,yellow 50%,#ff00aa 100%)，repeating-linear-gradient（to right, blue 0%,yellow 100%);}

background-repeat:設(shè)置背景是否平鋪：

其值：默認(rèn)值repeat水平垂直平鋪、no-repeat不平鋪、repeat-x水平平鋪、repeat-y垂直平鋪

body {background-repeat: no-repeat;}

★★background-image和background-color可以同時(shí)使用，此時(shí)圖片設(shè)置為不平鋪，圖片占不到的空白部分顯示background-color

background-size:設(shè)置背景大小：

其屬性值為一對(duì)尺寸，前面的是width，后面的是height，此屬性是背景縮放，并非背景裁剪,當(dāng)給一個(gè)值或另一個(gè)值為auto時(shí)，圖片等比例縮放，此屬性值還可以給關(guān)鍵詞：contain一邊觸碰到邊框后大小確定、cover鋪滿整個(gè)元素、

div {background-size: 300px 50%;}

background-origin背景圖片顯示基點(diǎn):

其值：padding-box內(nèi)邊距開始顯示背景，boder-box邊框開始顯示背景、content-box內(nèi)容區(qū)開始顯示背景圖片

div {background-origin: border-box;}

background-clip:背景裁剪：

其值：content-box裁掉內(nèi)容區(qū)以外的背景、padding-box裁掉內(nèi)邊距以外的背景、border-box裁掉邊框以外的背景

div {background-clip: border-box;}

background-position:定位背景圖片：

其值為一對(duì)或單個(gè);像素值、百分比、方位詞（left、right、bottom、top、center），一對(duì)值時(shí)中間用空格隔開，當(dāng)值為具體的像素或者百分比時(shí)，第一處設(shè)置水平方向的位置，第二處設(shè)置垂直方向的位置，只有一個(gè)像素或百分比值時(shí)，設(shè)置的是水平方向的定位；當(dāng)值為方位名詞時(shí)，沒有位置的限制，只有一個(gè)方位詞時(shí)，根據(jù)方位詞自動(dòng)識(shí)別水平還是垂直方向。無(wú)論是具體數(shù)值還是方位名詞，設(shè)置一處時(shí)，另一方向默認(rèn)居中。默認(rèn)圖片居于左上角。

div {width: 400px;height: 400px;background-color: aqua;background-image: url(捕獲.PNG);background-repeat: no-repeat;background-position: center top;}

background-attachement:設(shè)置背景圖像是否跟隨內(nèi)容滾動(dòng)（背景附著）：

其值：默認(rèn)scroll背景相對(duì)元素固定，背景隨頁(yè)面滾動(dòng)而滾動(dòng)、fixed背景相對(duì)視口固定、local相對(duì)元素內(nèi)容固定，隨元素內(nèi)容滾動(dòng)

div {background-attachement: fixed;}

背景連寫：

背景連寫的順序官方?jīng)]有強(qiáng)制要求，建議這樣寫：background:背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置

div {background:#000 url(images/bg.jpg) no-repeat fixed center top;}

多重背景：

多重背景是指給一個(gè)盒子可以設(shè)置多個(gè)背景圖片，只需要多設(shè)置幾個(gè)背景屬性值，中間用逗號(hào)隔開即可，顏色需要寫在最后，如：

div {background: url(images/bg.jpg) no-repeat fixed center top,url(images/bg1.jpg) no-repeat fixed center top,url(images/bg2.jpg) no-repeat fixed center top,yellow;}

精靈圖（雪碧圖）：

在實(shí)際開發(fā)中，有的時(shí)候一個(gè)頁(yè)面會(huì)用到好多的圖，此時(shí)會(huì)加重瀏覽器的負(fù)擔(dān)，為了解決瀏覽器請(qǐng)求次數(shù)負(fù)擔(dān)，可以把這些圖放到一張圖上面，一次請(qǐng)求到本緩存，利用定位的方式控制每個(gè)小圖在所在區(qū)域顯示即可。

div {width: 50px;height: 50px;background:url(images/bg.png) no-repeat -20px -50px;}

提示：本文圖片等素材來(lái)源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者 刪除。
筆者：苦海

總結(jié)

以上是生活随笔為你收集整理的CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。