div背景定位background設(shè)置元素的背景參數(shù)

發(fā)布時(shí)間：2013-02-02 14:49:18 作者：佚名

DIV背景定義參數(shù)：background 設(shè)置元素的背景參數(shù),div+css的廣泛使用，也改變了這一使用習(xí)慣，變成了將N多小圖標(biāo)集于一個(gè)大圖上，再通過(guò)div來(lái)定位需要用到的圖片部分，大大提升了網(wǎng)頁(yè)刷新的速度,感興趣的朋友可以了解下或許對(duì)你有所幫助

我都是會(huì)把工作中接觸到的新知識(shí)放在我的微博里面，但是由于微博總是限制我的字?jǐn)?shù)，有很多內(nèi)容我都是分散成幾個(gè)部分，現(xiàn)在我就來(lái)整理一個(gè)，我積累的一個(gè)頁(yè)面布局的內(nèi)容。

在早期table風(fēng)行的年代，頁(yè)面布局中使用的小圖標(biāo)，和背景會(huì)讓你的頁(yè)面中有非常多的圖片素材，這樣在加載的過(guò)程中就會(huì)很拖網(wǎng)速，造成頁(yè)面的用戶體驗(yàn)不好，現(xiàn)在div+css的廣泛使用，也改變了這一使用習(xí)慣，變成了將N多小圖標(biāo)集于一個(gè)大圖上，再通過(guò)div來(lái)定位需要用到的圖片部分，這樣操作能讓你的頁(yè)面少加載非常多的圖片素材，大大提升了網(wǎng)頁(yè)刷新的速度。

DIV背景定義參數(shù)：background 設(shè)置元素的背景參數(shù)，其中屬性依在寫(xiě)博客之前我都是會(huì)把工作中接觸到的新知識(shí)放在我的微博里面，但是由于微博總是限制我的字?jǐn)?shù)，有很多內(nèi)容我都是分散成幾個(gè)部分，現(xiàn)在我就來(lái)整理一個(gè)，我積累的一個(gè)頁(yè)面布局的內(nèi)容。

在早期table風(fēng)行的年代，頁(yè)面布局中使用的小圖標(biāo)，和背景會(huì)讓你的頁(yè)面中有非常多的圖片素材，這樣在加載的過(guò)程中就會(huì)很拖網(wǎng)速，造成頁(yè)面的用戶體驗(yàn)不好，現(xiàn)在div+css的廣泛使用，也改變了這一使用習(xí)慣，變成了將N多小圖標(biāo)集于一個(gè)大圖上，再通過(guò)div來(lái)定位需要用到的圖片部分，這樣操作能讓你的頁(yè)面少加載非常多的圖片素材，大大提升了網(wǎng)頁(yè)刷新的速度。

DIV背景定義參數(shù)：background 設(shè)置元素的背景參數(shù)，其中屬性依次為 background-color(背景色的.) | background-image(背景圖) | background-repeat(重復(fù)方式) | background-attachment(背景圖像固定還是滾動(dòng)) | background-position(背景圖像位置)

關(guān)于background-position 定位的問(wèn)題在一張大背景下對(duì)某一塊的取用時(shí)大背景的左上角為原點(diǎn)(0,0)，定位時(shí)，→指向x值減小,↓指向 y 值減少所以在定位中，通常都是兩個(gè)負(fù)數(shù)，在對(duì)定位的div進(jìn)行width height 限制就可以取出自己想要的背景圖片了！

通常在使用的時(shí)候樣式中定義為 background: url(/templates/v1/images/tips.png) 0 -17px; 這種格式是現(xiàn)在最常用的背景定位方式

寫(xiě)一段完整的吧：

復(fù)制代碼

代碼如下:

<div class="up_tip"></div>
.up_tip {
width: 20px; //定義高度和寬度
height: 18px;
background: url(/templates/v1/images/tips.png) 0 -17px; 定位圖片位置
display: inline-block; //這個(gè)比較重要，
}

算了還是專心寫(xiě)我的技術(shù)貼，因?yàn)槲沂?/span>web前端從業(yè)者，文章內(nèi)容難免會(huì)涉及到某個(gè)網(wǎng)站，在這里還請(qǐng)那些審核的編輯們，別弄得跟seo很骯臟一樣，見(jiàn)到這種就想刪說(shuō)明你們自己思想有問(wèn)題次為 background-color(背景色的) | background-image(背景圖) | background-repeat(重復(fù)方式) | background-attachment(背景圖像固定還是滾動(dòng)) | background-position(背景圖像位置)
　　關(guān)于background-position 定位的問(wèn)題在一張大背景下對(duì)某一塊的取用時(shí)大背景的左上角為原點(diǎn)(0,0)，定位時(shí)，→指向x值減小,↓指向 y 值減少所以在定位中，通常都是兩個(gè)負(fù)數(shù)，在對(duì)定位的div進(jìn)行width height 限制就可以取出自己想要的背景圖片了！
　　
通常在使用的時(shí)候樣式中定義為 background: url(/templates/v1/images/tips.png) 0 -17px; 這種格式是現(xiàn)在最常用的背景定位方式
寫(xiě)一段完整的吧：

復(fù)制代碼

代碼如下:

<div class="up_tip"></div>　
.up_tip {
width: 20px; //定義高度和寬度
height: 18px;
background: url(/templates/v1/images/tips.png) 0 -17px; //定位圖片位置這里可以相對(duì)路徑也可以絕對(duì)路徑
display: inline-block; //這個(gè)比較重要，
}