`

CSS实现纯图片替换效果和div模拟下拉条的实现 -- 剔除知识误区

CSSFirefoxHTMLUP 
阅读更多 
<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采用绝对地址，在IE６和IE７上均可完美显示，但在firefox上却无法显示。
若url采用相对地址，IE6、IE7和firefox全都不能显示了。

解决方案:
存放图片的文件夹的名字不能有大写字母，而且要采用文档相对路径导入图片。
导入背景图片时文件夹的名字全部采用小写字母或与数字组合，不使用大写字母和特殊符号。
导入图片的url采用相对路径类似'data/logo-img.gif'，不用绝对路径
正确设置后不管IE6还是IE7，或是firefox均可完美显示背景图片。


</pre>
</div>


</body>
</html>

 

3
顶
1
踩
分享到：
| 中国顶级黑客高手档案
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery实现自定义下拉条

    2. CSS样式：为了实现自定义的背景色和拉条，我们需要为按钮和下拉内容设置相应的CSS样式。例如，可以设置背景颜色、边框、字体等属性。 ```css .custom-dropdown { position: relative; } #dropdown-toggle { ...

    css设置div附带下拉条的方法

    在某些情况下，我们可能需要为一个div元素设置一个下拉条，以便在内容超出div显示范围时，用户可以通过滚动条查看全部内容。本篇文章将详细介绍如何通过CSS实现这一功能。 首先，我们要理解什么是下拉条。下拉条...

    css设置div附带下拉条的样式

    本文将详细介绍如何使用CSS来设置一个div元素，使其附带下拉条，并提供一个简单的示例。 首先，要让div元素具有下拉条，我们需要设定其高度（height）并限制其溢出（overflow）。这样，当内容超过设定的高度时，...

    Javascript 模拟下拉条功能

    在JavaScript中模拟下拉条，我们可以创建一个自定义的可滚动区域，并通过监听用户的鼠标和键盘事件来控制内容的滚动。以下是一些关键步骤： 1. **创建可滚动容器**： 首先，创建一个具有固定高度和宽度的容器元素...

    滚动条，div滚动条，图层下拉条

    本项目专注于“滚动条”的定制化，特别是针对`div`元素和图层下拉条的特效。通过自定义滚动条的样式和功能，可以提升网站的用户体验和视觉效果。 在HTML中，滚动条通常是自动出现的，但默认样式往往与网站的设计...

    搜索下拉条

    搜索下拉条的实现主要基于以下两个关键技术：实时匹配算法和数据存储。 - **实时匹配算法**：这是搜索下拉条的核心，它需要在用户输入的每个字符后立即提供匹配的建议。常见的算法有Trie树（字典树）、Levenshtein...

    精彩编程与编程技巧-显示 Combo 的下拉条...

    ### 知识点一：使用 SendMessage 函数控制组合框（Combo）下拉条的显示与隐藏 #### 1.1 SendMessage 函数介绍 在Windows API中，`SendMessage`函数是用于向指定窗口发送消息的一种方法。它等待直到窗口处理完消息后...

    仿QQ好友下拉条demo

    3. **ListView的滚动效果**：QQ好友下拉条的一大特色是滚动时的动态效果，比如滚动条的滑动动画、顶部和底部的缓冲效果。开发者可能通过重写`ListView`的滚动事件来实现这些效果。 4. **下拉刷新与上拉加载**：为了...

    DIV选项卡样式下拉

    本技术主要涉及HTML、CSS（层叠样式表）和JavaScript（脚本语言）的应用，实现下拉条的无缝显示效果。 **HTML基础** HTML是网页的基础结构，用于定义页面内容的布局。在选项卡设计中，通常会使用`&lt;div&gt;`元素创建每...

    计算机软件-商业源码-实例71 取得下拉条的信息.zip

    在计算机编程领域，"取得下拉条的信息"通常是指从用户界面中的下拉选择框（Dropdown List或ComboBox）中获取用户选定的值或者列表项的相关信息。这个过程涉及到前端交互和后端数据处理，是软件开发中常见的功能之一...

    自定义下拉条

    自定义下拉条在Android应用开发中是一种常见的控件，用于提供用户选择项的交互方式。通常，下拉条（Spinner）会出现在界面的顶部或者某个角落，点击后会展开一个下拉菜单供用户选择。在Android 5.0及更高版本中，...

    combox中绑定系统颜色和刷子下拉条

    综上所述，"combox中绑定系统颜色和刷子下拉条"涉及到C#编程中的`ComboBox`控件使用，系统颜色和画刷对象的创建，以及事件驱动的界面交互。通过这样的实现，用户可以在界面上方便地选择和预览颜色及画刷效果。

    XSTEEL拉条参数化节点

    在钢结构设计和施工中，XSTEEL是一款广泛使用的专业软件，它能够帮助工程师高效地进行三维钢结构建模、详图设计以及工程量统计。本文将深入探讨“XSTEEL拉条参数化节点”这一主题，旨在揭示其在屋面檩条间的应用、...

    行业文档-设计装置-拉条式直尺圆规画图笔.zip

    此外，画图笔还可能具备压力感应功能，通过改变施加的压力大小，自动调整线条的粗细，这样不仅模拟了传统绘图的自然笔触效果，而且还能通过这种方式增加设计作品的表现力和层次感。 整个装置的操作简便性也是其一大...

    python模拟网页滚动下拉实现

    python模拟网页下拉实现，进入网页后，实现右侧下拉条自动滚动

    MFC 带滚动条显示JPG图片

    下面我们将详细探讨实现这一功能的关键步骤和知识点。 首先，我们需要理解MFC框架。MFC是微软提供的一个C++类库，用于构建Windows应用程序，它封装了Windows API，提供了面向对象的编程接口。在MFC中，我们可以利用...

    行业分类-设备装置-一种焦炉交换机交换拉条传动系统.zip

    智能控制技术的应用，如采用变频调速控制，实现精准的动力分配和节能运行；以及维护保养策略的制定，定期检查和更换磨损部件，以延长设备寿命。 总之，一种焦炉交换机交换拉条传动系统是焦化生产中的关键技术，其...

Magicbox
Global site tag (gtag.js) - Google Analytics