css怎么設(shè)置div背景圖片

這篇文章主要介紹了css怎么設(shè)置div背景圖片的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇css怎么設(shè)置div背景圖片文章都會有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元合山做網(wǎng)站,已為上家服務(wù),為合山各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

一、背景基本語法   

1、CSS單詞：要對任何對象設(shè)置背景使用background樣式單詞。

2、CSS背景屬性語法結(jié)構(gòu)

1）、只設(shè)置顏色：

div{background:#000}

對div設(shè)置背景為純黑色（#000），此時無需設(shè)置使用background-color設(shè)置背景顏色，可以精簡節(jié)約幾個字符代碼。

2）、設(shè)置圖片為背景：

div{background:url(圖片路徑) no-repeat 4px 5px}

對div設(shè)置背景圖片，此圖片作為背景不平鋪（no-repeat ），同時作為圖片背景時候圖片距離div左間距4px開始顯示，距離上間距5px開始顯示。

二、DIV背景圖片設(shè)置案例集 

設(shè)置幾個不同的DIV盒子，分別將圖片作為DIV背景，設(shè)置CSS重復(fù)平鋪背景圖片、CSS不重復(fù)平鋪背景圖片、CSS橫向（從左到右）平鋪背景圖片、CSS縱向（從上到下）平鋪背景圖片，通過對DIV設(shè)置背景圖片不同狀態(tài)掌握div css background樣式。

這里DIVCSS5設(shè)置四個DIV盒子，CSS邊框、CSS高度、CSS寬度相同，同時分別設(shè)置以上四種不同背景圖片樣式。設(shè)置DIVCSS5的LOGO圖片作為背景進(jìn)行案例。

1、完整案例HTML代碼

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>背景圖片 在線演示 DIVCSS5</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> <!-- www.創(chuàng)新互聯(lián).com --> </head> <body> <p>平鋪整個DIV背景</p> <div class="box1">完全平鋪滿DIV</div>  <p>DIV背景圖片不重復(fù)平鋪</p> <div class="box2">背景圖片不重復(fù)平鋪</div>  <p>橫向（從左到右）平鋪DIV背景</p> <div class="box3">將圖片作為DIV背景橫向水平平鋪</div>  <p>縱向（從上到下）平鋪DIV背景</p> <div class="box4">將圖片作為DIV背景縱向水平平鋪</div> </body> </html>

說明：設(shè)置了四個DIV盒子分別CSS命名為“.box1”、“.box2”、“.box3”、“.box4”。此案例在DIVCSS5初始化模板基礎(chǔ)上實(shí)例實(shí)踐完成。

2、完整案例CSS代碼

@charset "utf-8"; /* DIVCSS5-CSS初始化模板-www.創(chuàng)新互聯(lián).com */ body, div {margin:0; padding:0;font-style: normal;font:16px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} ol, ul ,li{list-style:none} img {border: 0; vertical-align:middle} body{color:#000000;background:#FFF; text-align:center} a{color:#000000;text-decoration:none}  a:hover{color:#BA2636;text-decoration:underline}  .box1,.box2,.box3,.box4{ width:400px; height:200px; margin:0 auto; border:1px solid #666} .box1{background:url(創(chuàng)新互聯(lián)-logo.gif)} .box2{background:url(創(chuàng)新互聯(lián)-logo.gif) no-repeat 10px center} .box3{background:url(創(chuàng)新互聯(lián)-logo.gif) repeat-x 0 30px} .box4{background:url(創(chuàng)新互聯(lián)-logo.gif) repeat-y center}

以上前部分CSS是初始化模板自帶CSS樣式，后者“.box1”、“.box2”、“.box3”、“.box4”分別設(shè)置DIV水平居中（CSS布局居中）、寬度均為400px，高度均為200px，同時設(shè)置黑色邊框。

3、DIV+CSS案例關(guān)鍵解釋
1）、.box1{background:url(創(chuàng)新互聯(lián)-logo.gif)}
設(shè)置圖片作為”.box1”的背景，只使用了background引人圖片作為背景，沒有設(shè)置其它值，代表此圖片作為背景后任意方向平鋪整個對象背景。

對應(yīng)案例瀏覽器中效果截圖：

css怎么設(shè)置div背景圖片
背景圖片完全平鋪滿DIV截圖

2）、.box2{background:url(創(chuàng)新互聯(lián)-logo.gif) no-repeat 10px center}
設(shè)置圖片作為”.box2”的背景，no-repeat不平鋪重復(fù)顯示，并設(shè)置此圖片作為背景后距離對象左邊10px，垂直居中（上下居中）顯示該圖片。

對應(yīng)案例瀏覽器中效果截圖：

css怎么設(shè)置div背景圖片
圖片不重復(fù)作為DIV背景圖片截圖

3）、.box3{background:url(創(chuàng)新互聯(lián)-logo.gif) repeat-x 0 30px}
設(shè)置圖片作為”.box3”的背景，repeat-x水平橫向平鋪該圖片，并且距離對象左邊為0px間距，距離對象上間距30px開始水平橫向平鋪。

對應(yīng)案例瀏覽器中效果截圖：

css怎么設(shè)置div背景圖片
圖片作為DIV背景圖片橫向水平平鋪截圖

4）、.box4{background:url(創(chuàng)新互聯(lián)-logo.gif) repeat-y center}
設(shè)置圖片作為”.box4”的背景，repeat-y垂直從上到下縱向平鋪改圖片，并且該圖片水平橫向居中開始從上到下垂直平鋪。

對應(yīng)案例瀏覽器中效果截圖：

css怎么設(shè)置div背景圖片
垂直平鋪DIV背景圖片案例截圖

關(guān)于“css怎么設(shè)置div背景圖片”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“css怎么設(shè)置div背景圖片”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文標(biāo)題：css怎么設(shè)置div背景圖片
地址分享：http://bm7419.com/article46/iiopeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、標(biāo)簽優(yōu)化、網(wǎng)頁設(shè)計(jì)公司、虛擬主機(jī)、網(wǎng)站排名、定制網(wǎng)站

廣告

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

商城網(wǎng)站建設(shè)