CSS圖像拼合技術
1.圖像拼合
有了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>運行結果如下圖：
這個效果加了一個懸浮樣式鼠標懸停到元素上，設置background-position 的位置來改變圖片的位置持續更新，歡迎大家指教！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
