詳解css圖像拼合技術(shù)（精靈圖）
發(fā)布時(shí)間：2018-07-20 16:12:41 作者：酷酷的波 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了詳解css圖像拼合技術(shù)（精靈圖）的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
CSS圖像拼合技術(shù)
1.圖像拼合
- 圖像拼合技術(shù)就是單個(gè)圖像的集合。
- 有很多圖片的網(wǎng)頁(yè)可能會(huì)需要很多時(shí)間來(lái)加載和生成多個(gè)服務(wù)器的請(qǐng)求。
- 使用圖像拼合會(huì)降低服務(wù)器的請(qǐng)求數(shù)量，并節(jié)省帶寬。圖像拼合實(shí)例
有了css樣式，我們可以顯示我們需要的圖像的一部分
詳細(xì)代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>圖片整合</title>
<style>
.box{
width:200px;
margin:0 auto;
overflow:hidden;
}
.iton{
width:43px;
margin-left:10px;
height:44px;
float:left;
background:url(images/img_navsprites_hover.gif) no-repeat;
}
.span01{
background-position:0 0;
}
.span02{
background-position:-47px 0;
}
.span03{
background-position:-91px 0;
}
.span01:hover{
background-position:0 -45px ;
}
.span02:hover{
background-position:-47px -45px ;
}
.span03:hover{
background-position:-91px -45px ;
}
</style>
</head>
<body
<div class="box">
<span class="iton span01"></span>
<span class="iton span02"></span>
<span class="iton span03"></span>
</div>
<body>
</html>
運(yùn)行結(jié)果如下圖：
這個(gè)效果加了一個(gè)懸浮樣式鼠標(biāo)懸停到元素上，設(shè)置background-position 的位置來(lái)改變圖片的位置持續(xù)更新，歡迎大家指教！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS實(shí)現(xiàn)精靈圖與字體圖標(biāo)
這篇文章主要介紹了CSS實(shí)現(xiàn)精靈圖與字體圖標(biāo)的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-05-08
這篇文章主要介紹了CSS精靈圖的原理與使用方法介紹,精靈圖不是一項(xiàng)新的功能，而是一個(gè)新技術(shù)或新思想，它的實(shí)現(xiàn)是由舊的功能解決的，對(duì)CSS精靈圖的原理與使用相關(guān)知識(shí)感興2022-03-16
