通过css切换图片效果,点击这个图片可以实现连接功能,这里的图片在一张大图片中,每个并要切换的图片没有切换,通过disposition定位的方式做 -尊龙游戏旗舰厅官网
尊龙游戏旗舰厅官网
收集整理的这篇文章主要介绍了
通过css切换图片效果,点击这个图片可以实现连接功能,这里的图片在一张大图片中,每个并要切换的图片没有切换,通过disposition定位的方式做
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
//要注意的是这里的hover属性是不能变得,其中图片偏移位置是以 background: 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: 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定位的方式做的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇:
- 下一篇: