div背景定位的使用方法

在寫博客之前 我都是會把工作中接觸到的新知識放在我的微博裏面,但是由於微博總是限制我的字數,有很多內容我都是分散成幾個部分,現在我就來整理一個,我積累的一個頁面佈局的內容。

在早期table風行的年代,頁面佈局中使用的小圖標,和背景會讓你的頁面中有非常多的圖片素材,這樣在加載的過程中就會很拖網速,造成頁面的用戶體驗不好,現在div+css的廣泛使用,也改變了這一使用習慣,變成了將N多小圖標集於一個大圖上,再通過div來定位需要用到的圖片部分,這樣操作能讓你的頁面少加載非常多的圖片素材,大大提升了網頁刷新的速度。

DIV背景定義參數:background 設置元素的背景參數,其中屬性依次爲 background-color(背景色) | background-image(背景圖) | background-repeat(重複方式) | background-attachment(背景圖像固定還是滾動) | background-position(背景圖像位置)

關於background-position 定位的問題 在一張大背景下 對某一塊的取用時大背景的左上角 爲原點(0,0),定位時,→指向x值減小,↓指向 y 值減少 所以在定位中,通常都是兩個負數,在對定位的div進行width height 限制 就可以取出自己想要的背景圖片了!
通常在使用的時候 樣式中定義爲 background: url(http:www.webgamei.com/templates/v1/images/tips.png) 0 -17px;  這種格式是現在最常用的背景定位方式

寫一段完整的吧:

<div class="up_tip"></div>

.up_tip {

width: 20px;   //定義高度和寬度

height: 18px;

background: url(http:www.webgamei.com/templates/v1/images/tips.png) 0 -17px;  定位圖片位置

display: inline-block;  //這個比較重要,

}

文章最後先吐槽下,談談自己對互聯網的一些看法,這也算受限制的內容,我去,現在互聯網是有多TM不能講話啊,帶幾個鏈接說你發廣告,說幾句評價,說尼瑪負面新聞,一羣編輯這麼怕老闆抽你!?

算了還是專心寫我的技術貼,因爲我是web前端從業者,文章內容難免會涉及到某個網站,在這裏還請那些審覈的編輯們,別弄得跟seo很骯髒一樣,見到這種就想刪說明你們自己思想有問題


轉載:http://www.webgamei.com/club/thread-93840-1-1.html
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章