通过CSS切换图片效果,点击这个图片可以实现连接功能,这里的图片在一张大图片中,每个并要切换的图片没有切换,通过disposition定位的方式做-阿里云开发者社区

开发者社区> 涂作权> 正文

通过CSS切换图片效果,点击这个图片可以实现连接功能,这里的图片在一张大图片中,每个并要切换的图片没有切换,通过disposition定位的方式做

简介: //要注意的是这里的hover属性是不能变得,其中图片偏移位置是以  background: url("images/icons.png") no-repeat scroll 0 0 transparent;中的(0,0)这个点为参考点的。 如果图片要想定位到(0,0)点要向上移或是左移,所以是负值   .release-op a {     display
+关注继续查看
//要注意的是这里的hover属性是不能变得,其中图片偏移位置是以 
backgroundurl("images/icons.png") no-repeat scroll 0 0 transparent;中的(0,0)这个点为参考点的。
如果图片要想定位到(0,0)点要向上移或是左移,所以是负值
 
.release-op a {
    displayblock;
    floatleft;
    margin14px 0 0 40px;
}
.icon-text {
    background-position2px -238px;
}
.icon-text, .icon-photo, .icon-video, .icon-music, .icon-link {
    height75px;
    width60px;
}
.icon {
    backgroundurl(images/icons.png) no-repeat scroll 0 0 transparent;         //表示在icons.png这张含有很多很多图片的大图片中取出我们自己想要得图片
    cursorpointer;
    margin5px;
}
a {
    text-decorationnone;
}
.icon-text:hover {
    background-position2px -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新属性实现特殊的图片显示效果
使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示效果。本文转载自Bennett Feely的个人网站,文中共列举了20种图片显示效果。
794 0
前端 css+js实现返回顶部功能
描述:        本文主要是讲,通过css+js实现网页中的【返回顶部】功能。   实现代码: HTML: 1 2 返回顶部 3   CSS: 1 /* return top */ 2 #btnTop { 3 display: none; 4 position:...
1133 0
阿里云ECS连接数据库教程方法
阿里云ECS云服务器如何连接RDS云数据库?云吞铺子总结首先将ECS加入到RDS白名单,然后获取到RDS的连接地址、RDS的数据库用户名、密码及数据库名即可连接,云吞铺子分享详细的操作方法: 将ECS添加到RDS的白名单中 出于安全考虑,RDS默认自带了白名单规则,想要让ECS连接RDS数据库必须.
4593 0
Asp.net MVC3 企业网站系统高仿博客园 首页左侧列表页面 实现效果
在前一篇文章Asp.net MVC 3 开发企业网站系统仿照博客园部分功能--总体设计中介绍了数据库的总体设计,现在呢我们就来实现博客园的左侧网站分类效果实现。当然因为我的前端功底实在不敢恭维,所以我采用博客园的CSS和JS脚本,这样我们可以提高网站的实现速度,而不用为了前端的显示界面调整浪费时间(注:前端很重要)。
1147 0
jQuery 写的插件图片上下切换幻灯效果
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
589 0
+关注
涂作权
java,架构,编程语言相关专家
1234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载