background背景
背景共分為以下8個屬性
background-color:背景顏色
background-image:背景圖片
background-repeat:背景圖片重復(fù)
background-position:背景圖片位置
background-size:背景圖片尺寸
background-attachment:背景圖片是否固定不動
background-clip:背景覆蓋區(qū)
background-origin:背景圖片覆蓋區(qū)
其中常用的是
background-color，background-image，background-repeat，background-position
background-color:

在瑞昌等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計、成都網(wǎng)站制作 網(wǎng)站設(shè)計制作按需定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計,全網(wǎng)整合營銷推廣,成都外貿(mào)網(wǎng)站建設(shè),瑞昌網(wǎng)站建設(shè)費用合理。

顏色名稱，如:background-color:red(背景顏色是紅色)

• 十六進制背景色，如:background-color:#ff0000;/background-color:#f00;(#后面有三個字符說明每兩個是相同的，也就是#f00相當于#ff0000)

• rgb顏色，這里如果是rgba，a表示透明程度，0表示全透明，1表示完全不透明，如：background-color:rgba(255,0,0,0.5);

• transparent,透明，如：background-color:transparent;

background-image:

• url圖片地址，可以多個圖片,如：background-image:url(img/a.jpg),url(img/b.jpg)

• none，不顯示背景圖像

background-image與background-color聯(lián)合使用，保證在出現(xiàn)以下幾種情況下，有背景色可以填充
(1)圖片出不來(可能路徑錯，圖片不存在)
(2)圖片被誤刪除
(3)圖片在不平鋪的情況下覆蓋不了整個盒子
background-repeat:

• repeat:水平和垂直方向都重復(fù)圖像，如：background-repeat:repeat;

• repeat-x:水平方向重復(fù)圖像

• repeat-y:垂直方向重復(fù)圖像

• no-repeat:圖像不重復(fù)

background-position：

• 位置名字組合定位，只寫一個默認另一個為居中，如：background-position:right bottom;/background-position:center;

• 百分比位置，如:background-position:20% 20%；

• 具體像素位置，如：background-position:20px 20px;

background-attachment:

• scroll:背景圖像相對于頁面不動，會隨著網(wǎng)頁的滾動而移動，默認

• fixed:背景圖像相對于瀏覽器窗口不動，內(nèi)容滾動的時候背景圖像不動，如：background-attachment:fixed;

background-size：

• 像素大小，只寫一個默認另一個為auto，如：background-size:200px 100px;

• 百分比大小，如：background-size:60% 60%;

• cover:背景圖像覆蓋當前元素的所有背景區(qū)域，如:background-size:cover;

• contain:圖像顯示大且剛好完全顯示，一般不能覆蓋全部背景區(qū)

background-clip：

• border-box:背景覆蓋到邊框區(qū)域，如：background-clip:border-box;

• padding-box:背景覆蓋到padding區(qū)域

• contect-box:背景只覆蓋到content區(qū)域

background-origin：

• border-box:背景圖像的起始位置在邊框處，如:background-origin:border-box;

• padding-box:背景圖像的起始位置從padding處開始

• content-box:背景圖像的起始位置從content處開始

該屬性從ie9開始支持
background簡寫：(中間用空格隔開)
background:(background-color)(background-image)(background-repeat)(background-position)(background-size)
例：
.box {
height: 400px;
background-color: #e8e8e8;
background-image: url('www.baidu.com/XXXX.jpg');可以加單引號也可以不加
background-repeat: no-repeat;
background-position: center center;
background-size: 100px 100px;
}
可以簡寫為:
.box {
height: 400px;
background: #e8e8e8 url('www.baidu.com/XXXX.jpg') no-repeat center center/100px 100px;
}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：CSS背景相關(guān)知識-創(chuàng)新互聯(lián)
路徑分享：http://www.rwnh.cn/article14/jdsde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、虛擬主機、企業(yè)建站、電子商務(wù)、網(wǎng)站收錄、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)