小編給大家分享一下CSS使用圖像拼合技術(shù)的方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
為羅定等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及羅定網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、羅定網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求,就會得到認可,從而選擇與我們長期合作。這樣,我們也可以走得更遠!一、圖像拼合
圖像拼合就是單個圖像的集合。
有許多圖像的網(wǎng)頁可能需要很長的時間來加載和生成多個服務(wù)器的請求。
使用圖像拼合會降低服務(wù)器的請求數(shù)量,并節(jié)省帶寬。
二、圖像拼合 - 簡單實例
與其使用三個獨立的圖像,不如我們使用這種單個圖像("img_navsprites.gif"):
有了CSS,我們可以只顯示我們需要的圖像的一部分。
在下面的例子CSS指定顯示 "img_navsprites.gif" 的圖像的一部分:
img.home { width:46px; height:44px; background:url(img_navsprites.gif) 0 0; }
實例解析:
<img class="home" src="img_trans.gif" /> -因為不能為空,src屬性只定義了一個小的透明圖像。顯示的圖像將是我們在CSS中指定的背景圖像
寬度:46px;高度:44px; - 定義我們使用的那部分圖像
background:url(img_navsprites.gif) 0 0; - 定義背景圖像和它的位置(左0px,頂部0px)
這是使用圖像拼合最簡單的方法,現(xiàn)在我們使用鏈接和懸停效果。
三、圖像拼合 - 創(chuàng)建一個導(dǎo)航列表
我們想使用拼合圖像 ("img_navsprites.gif"),以創(chuàng)建一個導(dǎo)航列表。
我們將使用一個HTML列表,因為它可以鏈接,同時還支持背景圖像:
#navlist{position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('img_navsprites.gif') 0 0;} #prev{left:63px;width:43px;} #prev{background:url('img_navsprites.gif') -47px 0;} #next{left:129px;width:43px;} #next{background:url('img_navsprites.gif') -91px 0;}
實例解析:
#navlist{position:relative;} - 位置設(shè)置相對定位,讓里面的絕對定位
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding設(shè)置為0,列表樣式被刪除,所有列表項是絕對定位
#navlist li, #navlist a{height:44px;display:block;} - 所有圖像的高度是44px
現(xiàn)在開始每個具體部分的定位和樣式:
#home{left:0px;width:46px;} - 定位到最左邊的方式,以及圖像的寬度是46px
#home{background:url(img_navsprites.gif) 0 0;} - 定義背景圖像和它的位置(左0px,頂部0px)
#prev{left:63px;width:43px;} - 右側(cè)定位63px(#home寬46px+項目之間的一些多余的空間),寬度為43px。
#prev{background:url('img_navsprites.gif') -47px 0;} - 定義背景圖像右側(cè)47px(#home寬46px+分隔線的1px)
#next{left:129px;width:43px;}- 右邊定位129px(#prev 63px + #prev寬是43px + 剩余的空間), 寬度是43px.
#next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定義背景圖像右邊91px(#home 46px+1px的分割線+#prev寬43px+1px的分隔線)
四、圖像拼合s - 懸停效果
現(xiàn)在,我們希望我們的導(dǎo)航列表中添加一個懸停效果。
:hover 選擇器用于鼠標懸停在元素上的顯示的效果
提示: :hover 選擇器可以運用于所有元素。
我們的新圖像 ("img_navsprites_hover.gif") 包含三個導(dǎo)航圖像和三幅圖像:
因為這是一個單一的圖像,而不是6個單獨的圖像文件,當用戶停留在圖像上不會有延遲加載。
我們添加懸停效果只添加三行代碼:
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;} #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;} #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
實例解析:
由于該列表項包含一個鏈接,我們可以使用:hover偽類
#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 對于所有三個懸停圖像,我們指定相同的背景位置,只是每個再向下45px
看完了這篇文章,相信你對CSS使用圖像拼合技術(shù)的方法有了一定的了解,想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道,感謝各位的閱讀!
新聞標題:CSS使用圖像拼合技術(shù)的方法-創(chuàng)新互聯(lián)
標題路徑:http://muchs.cn/article24/pgsce.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、App開發(fā)、網(wǎng)站策劃、做網(wǎng)站、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容