[置顶] CSS实现纯图片替换效果和div模拟下拉条的实现 -- 剔除知识误区
2016-08-25 16:53
621 查看
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS Implement Image Replace Effect</title></head> <style> html,body{height: 100%;} div { border: 2px solid green;width:680; height:200;overflow:auto; margin: 60px auto ; } div #imgs { display: block ; cursor:pointer; background-image:url("./images/compass1.gif"); width: 60px ;height: 60px; } div a:hover #imgs { display: block ; background-image:url("./images/compass2.gif"); } </style> <body> <div> <a href="#" title="[Up]"><span id='imgs'></span></a> <pre> a 在IE6中必须设置href属性才能使用:hover伪类, 在IE7中则可以在每个对象中使用伪类 问题描述: 在编辑器中用background-image:url('...')这个属性导入背景图片时, 若url采用绝对地址,在IE6和IE7上均可完美显示,但在firefox上却无法显示。 若url采用相对地址,IE6、IE7和firefox全都不能显示了。 解决方案: 存放图片的文件夹的名字不能有大写字母,而且要采用文档相对路径导入图片。 导入背景图片时文件夹的名字全部采用小写字母或与数字组合,不使用大写字母和特殊符号。 导入图片的url采用相对路径类似'data/logo-img.gif',不用绝对路径 正确设置后不管IE6还是IE7,或是firefox均可完美显示背景图片。 </pre> </div> </body> </html>
指南针效果.rar (28.8 KB)
下载次数: 58
相关文章推荐
- 用纯CSS实现禁止鼠标点击事件示例代码
- 下拉菜单制作
- css性能优化总结,工作中习惯css规范
- CSS 设置背景图只显示一部分
- CSS hack常用方案(摘选)
- 什么是CSS3?
- 用css实现背景渐变
- HTML+CSS基础课程之包含(后代)选择器
- CSS3实现3D方块旋转
- 选择器
- css3 图片旋转效果 以y轴翻转效果等
- css 单行和多行文本溢出显示省略号
- 苹果手机下不是a标签却有了a标签的样式的解决方案
- CSS快速学习8:圆角切图、滚动条和图片整合技术
- 【css3初级】transition过渡效果写法,鼠标放到图片上图片变小
- css3,居中文字,居中对齐,文字两端对齐
- CSS简介、编写CSS代码的方式、HTML和CSS注释
- CSS:CSS层叠样式表的概述
- css3弹性盒子如何布局
- dedecms 模型新添加的自定义字段设置样式