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

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

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

一、背景基本語(yǔ)法   

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

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

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

div{background:#000}

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

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

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

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

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

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

這里DIVCSS5設(shè)置四個(gè)DIV盒子，CSS邊框、CSS高度、CSS寬度相同，同時(shí)分別設(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>平鋪整個(gè)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>

說(shuō)明：設(shè)置了四個(gè)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í)設(shè)置黑色邊框。

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

對(duì)應(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è)置此圖片作為背景后距離對(duì)象左邊10px，垂直居中（上下居中）顯示該圖片。

對(duì)應(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水平橫向平鋪該圖片，并且距離對(duì)象左邊為0px間距，距離對(duì)象上間距30px開(kāi)始水平橫向平鋪。

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

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

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

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

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

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

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

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

廣告

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

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