//要注意的是這里的hover屬性是不能變得，其中圖片偏移位置是以? background:?url("images/icons.png") no-repeat scroll 0 0 transparent;中的（0,0）這個點為參考點的。 如果圖片要想定位到(0,0)點要向上移或是左移，所以是負值 ? .release-op a { ????display:?block; ????float:?left; ????margin:?14px 0 0 40px; } .icon-text { ????background-position:?2px -238px; } .icon-text, .icon-photo, .icon-video, .icon-music, .icon-link { ????height:?75px; ????width:?60px; } .icon { ????background:?url(images/icons.png) no-repeat scroll 0 0 transparent;???????? //表示在icons.png這張含有很多很多圖片的大圖片中取出我們自己想要得圖片 ????cursor:?pointer; ????margin:?5px; } a { ????text-decoration:?none; } .icon-text:hover { ????background-position:?2px -318px; } .icon-photo { ????background-position:?-113px -238px; } .icon-photo:hover { ????background-position:?-113px -318px; } .icon-video { ????background-position:?-227px -238px; } .icon-video:hover { ????background-position:?-227px -318px; } .icon-music { ????background-position:?-343px -238px; } .icon-music:hover { ????background-position:?-343px -318px; } .icon-link { ????background-position:?-456px -238px; } .icon-link:hover { ????background-position:?-456px -318px; } 對應的HTML代碼 <div?class="release-op right shadow"> <a?class="icon icon-text"?href="###"></a> <a?class="icon icon-photo"?href="###"></a> <a?class="icon icon-video"?href="###"></a> <a?class="icon icon-music"?href="###"></a> <a?class="icon icon-link"?href="###"></a> <div?class="header-reg-right right"> <a?href="###">15秒駕馭車友說 →</a> </div> </div>

總結

以上是生活随笔為你收集整理的通过CSS切换图片效果，点击这个图片可以实现连接功能，这里的图片在一张大图片中，每个并要切换的图片没有切换，通过disposition定位的方式做的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。