背景background:

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

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

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

body {background-color: #332211;}

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

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

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

漸變色：

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

線性漸變語法：

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

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

徑向漸變語法：

radial-gradient(顏色 起始百分比 , 顏色 結(jié)束百分比),徑向漸變默認(rèn)方向是從中心內(nèi)到外，若要改變漸變圓心位置則需要在括號最前面加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è)置為不平鋪，圖片占不到的空白部分顯示background-color

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

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

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

background-origin背景圖片顯示基點:

其值：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:定位背景圖片：

其值為一對或單個;像素值、百分比、方位詞（left、right、bottom、top、center），一對值時中間用空格隔開，當(dāng)值為具體的像素或者百分比時，第一處設(shè)置水平方向的位置，第二處設(shè)置垂直方向的位置，只有一個像素或百分比值時，設(shè)置的是水平方向的定位；當(dāng)值為方位名詞時，沒有位置的限制，只有一個方位詞時，根據(jù)方位詞自動識別水平還是垂直方向。無論是具體數(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)容滾動（背景附著）：

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

div {background-attachement: fixed;}

背景連寫：

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

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

多重背景：

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

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;}

精靈圖（雪碧圖）：

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

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

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

總結(jié)

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

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