css如何設置div背景圖片

今天小編給大家分享一下css如何設置div背景圖片的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

成都創新互聯公司于2013年成立，先為蓮湖等服務建站，蓮湖等地企業，進行企業商務咨詢服務。為蓮湖企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

一、配景基本語法

1、CSS單詞：要對任何對象設置靠山使用bac千克round花式單詞。

2、CSS配景屬性語法結構

1）、只設置裝備擺設顏色：

div{bac千克round:#000}

對div配置配景為純黑色（#000），此時無需配置應用background-color配置布景色調，興許裁減節約幾個字符代碼。

2）、配置圖片為后援：

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

對div配置配景圖片，此圖片作為背景不屈鋪（no-repeat ），同時作為圖片靠山時刻圖片隔斷div左間距4px起源浮現，距離上間距5px開始表示。

二、DIV布景圖片設置裝備擺設案例集

設置幾個差異的DIV盒子，別離將圖片作為DIV背景，設置CSS幾回再三平鋪背景圖片、CSS不重復平鋪配景圖片、CSS橫向（從左到右）平鋪背景圖片、CSS縱向（從上到下）平鋪配景圖片，通過對DIV配置布景圖片差異狀態掌握div css background款式。

這里Thinkcss配置四個DIV盒子，CSS邊框、CSS高度、CSS寬度不異，同時別離設置裝備擺設以上四種差別背景圖片款式。設置裝備擺設CSS5的LOGO圖片作為背景發展案例。

1、完整案例HTML代碼

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>靠山圖片 在線演示 CSS5</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> <!-- css5.com.cn --> </head> <body> <p>平鋪整個DIV后盾</p> <div class="box1">完全平鋪滿DIV</div>  <p>DIV配景圖片不重復平鋪</p> <div class="box2">后援圖片不反復平鋪</div>  <p>橫向（從左到右）平鋪DIV后臺</p> <div class="box3">將圖片作為DIV靠山橫向程度平鋪</div>  <p>縱向（從上到下）平鋪DIV后盾</p> <div class="box4">將圖片作為DIV靠山縱向水準平鋪</div> </body> </html>

注明：設置了四個DIV盒子離別CSS定名為“.box1”、“.box2”、“.box3”、“.box4”。此案例在CSS5初始化模板基礎底細上實例理論實現。

2、完整案例CSS代碼

@charset "utf-8"; /* CSS5-CSS初始化模板-css5.com.cn */ 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;bac千克round:#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{bac千克round:url(CSS5-logo.gif)} .box2{bac千克round:url(CSS5-logo.gif) no-repeat 10px center} .box3{bac公斤round:url(CSS5-logo.gif) repeat-x 0 30px} .box4{bac千克round:url(CSS5-logo.gif) repeat-y center}

以上前部份CSS是初始化模板自帶CSS樣式，后者“.box1”、“.box2”、“.box3”、“.box4”別離設置裝備擺設DIV水準居中（CSS機關居中）、寬度均為400px，高度均為200px，同時設置裝備擺設玄色邊框。

3、DIV+CSS案例關頭剖明 1）、.box1{bac千克round:url(CSS5-logo.gif)} 設置裝備擺設圖片作為”.box1”的布景，只運用了bac千克round惹人圖片作為布景，沒有配置另外值，代表此圖片作為布景后任意標的目的平鋪整個對象背景。

以上就是“css如何設置div背景圖片”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注創新互聯行業資訊頻道。

新聞名稱：css如何設置div背景圖片
路徑分享：http://m.kartarina.com/article10/jecodo.html

成都網站建設公司_創新互聯，為您提供建站公司、Google、做網站、動態網站、網站策劃、外貿建站

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

猜你還喜歡下面的內容