通过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 {
     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>
目录
相关文章
|
14天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
41 1
|
6天前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
11 0
|
14天前
|
存储 前端开发 开发者
深入了解 Sass 和 SCSS:CSS 预处理器的强大功能
Sass(Syntactically Awesome Stylesheets)是一个强大的 CSS 预处理器,为开发者提供了诸多高级特性,如变量、嵌套、混合、继承等,简化了 CSS 的编写和管理。SCSS 是 Sass 3 引入的新语法,完全兼容 CSS3,并增强了 Sass 的动态功能。本文详细介绍了 Sass 和 SCSS 的核心特性及其在实际开发中的应用,如变量定义、嵌套规则、混合、继承、以及常用的操作符与扩展功能。
21 0
|
2月前
|
前端开发
|
3月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
27 5
|
3月前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
3月前
|
前端开发 容器
css中使用定位实现吸顶效果
css中使用定位实现吸顶效果
85 2
|
3月前
|
前端开发
如何使用 CSS object-fit 进行图片的缩放和裁剪
如何使用 CSS object-fit 进行图片的缩放和裁剪
73 0
如何使用 CSS object-fit 进行图片的缩放和裁剪
|
3月前
|
前端开发 容器
解锁CSS定位奥秘,从迷茫到精通,让你的网页布局“稳如老狗”,引领前端新潮流!
【8月更文挑战第23天】本文深入探讨了Web前端开发中CSS定位的三大基石:相对定位、绝对定位与固定定位。通过具体示例,展示了各种定位方式的特点及应用场景。相对定位可在不影响布局的情况下微调元素位置;绝对定位使元素完全脱离文档流,适用于精确控制位置的需求;固定定位则确保元素始终固定于浏览器窗口特定位置,不受页面滚动影响。这些技巧对于实现复杂网页布局至关重要。
51 0
|
3月前
|
前端开发
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!