欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

CSS中Sprites有什么用

這篇文章主要介紹CSS中Sprites有什么用,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!

創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今,先為比如等服務(wù)建站,比如等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為比如企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

CSS Sprites是一種性能優(yōu)化技術(shù),是一種將多個圖像組合成單個圖像文件以在網(wǎng)站上使用的方法,以提高性能;也被稱為css 精靈圖。

為什么要使用Sprites(精靈圖)?

網(wǎng)頁通常包含多個圖像。這些包括圖標(biāo),按鈕,徽標(biāo),相關(guān)圖片和其他圖形。當(dāng)頁面中加載圖像時,瀏覽器向服務(wù)器發(fā)出HTTP請求。分別加載每個圖像需要多次調(diào)用HTTP服務(wù)器,這可能導(dǎo)致下載時間變慢以及帶寬使用率過高。

CSS Sprites會將多個圖像組合成一個稱為精靈表或拼貼圖的單個圖像,用戶不下載多個文件,而是下載單個文件并通過偏移文件顯示必要的圖像(或精靈圖)。

這樣可以減少對服務(wù)器的調(diào)用、減少呈現(xiàn)網(wǎng)頁所需的下載次數(shù),節(jié)省帶寬并縮短用戶端的下載時間,減少網(wǎng)絡(luò)擁塞。

如何使用CSS Sprites(精靈圖)?

因為CSS Sprites是一張多個圖像組合成單個圖像,在精靈表中多個圖像會被放置在網(wǎng)格狀圖案里,呈現(xiàn)網(wǎng)狀分布。

當(dāng)需要特定圖像(精靈圖)時,一般會通過CSS background-images屬性引用精靈表,在通過CSS background-position屬性對其進(jìn)行偏移定位得到所需的精靈圖,然后以像素為單位定義精靈圖的大小。

使用Sprites(精靈圖)的實例

代碼示例:

html代碼:

<ul class="menu">
        <li class="firefox"><a href="#">Firefox</a></li>
        <li class="chrome"><a href="#">Chrome</a></li>
        <li class="ie"><a href="#">Explorer</a></li>
        <li class="opera"><a href="#">Opera</a></li>
        <li class="safari"><a href="#">Safari</a></li>
</ul>

css代碼:

ul.menu {
        list-style-type: none;
        width: 400px;
}
ul.menu li {
        padding:20px 5px;
        font-size: 16px;
        float: left;
        font-family: "Trebuchet MS", Arial, sans-serif;
}
ul.menu li a {
        height: 50px;
        line-height: 50px;
        display: inline-block;
        padding-left: 60px; /* To sift text off the background-image */
        color: #3E789F;
        background:url(Sprites.png) no-repeat; /* As all link share the same background-image */
}
ul.menu li.firefox a {
        background-position: 0 0;
}
ul.menu li.chrome a {
        background-position: 0 -100px;
}
ul.menu li.ie a {
        background-position: 0 -200px;
}
ul.menu li.safari a {
        background-position: 0 -300px;
}
ul.menu li.opera a {
        background-position: 0 -400px;
}
ul.menu li.firefox a:hover {
        background-position: 0 -50px;
}
ul.menu li.chrome a:hover {
        background-position: 0 -150px;
}
ul.menu li.ie a:hover {
        background-position: 0 -250px;
}
ul.menu li.safari a:hover {
        background-position: 0 -350px;
}
ul.menu li.opera a:hover {
        background-position: 0 -450px;
}

效果圖:

CSS中Sprites有什么用

當(dāng)鼠標(biāo)懸停到一個精靈圖上時:

CSS中Sprites有什么用

動態(tài)效果:

CSS中Sprites有什么用

以上是“CSS中Sprites有什么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!

文章題目:CSS中Sprites有什么用
當(dāng)前地址:http://www.chinadenli.net/article30/jigcso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計軟件開發(fā)關(guān)鍵詞優(yōu)化ChatGPT定制開發(fā)網(wǎng)頁設(shè)計公司

廣告

聲明:本網(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)

外貿(mào)網(wǎng)站制作