詳解css圖像拼合技術(shù)（精靈圖）
發(fā)布時間：2018-07-20 16:12:41 作者：酷酷的波 
我要評論
我要評論這篇文章主要介紹了詳解css圖像拼合技術(shù)（精靈圖）的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
CSS圖像拼合技術(shù)
1.圖像拼合
- 圖像拼合技術(shù)就是單個圖像的集合。
- 有很多圖片的網(wǎng)頁可能會需要很多時間來加載和生成多個服務(wù)器的請求。
- 使用圖像拼合會降低服務(wù)器的請求數(shù)量，并節(jié)省帶寬。圖像拼合實例
有了css樣式，我們可以顯示我們需要的圖像的一部分
詳細代碼如下：
<!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>
運行結(jié)果如下圖：
這個效果加了一個懸浮樣式鼠標懸停到元素上，設(shè)置background-position 的位置來改變圖片的位置持續(xù)更新，歡迎大家指教！
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了CSS實現(xiàn)精靈圖與字體圖標的相關(guān)知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-05-08
這篇文章主要介紹了CSS精靈圖的原理與使用方法介紹,精靈圖不是一項新的功能，而是一個新技術(shù)或新思想，它的實現(xiàn)是由舊的功能解決的，對CSS精靈圖的原理與使用相關(guān)知識感興2022-03-16
