标记语言——图片替换
互联网 发布时间：2008-10-17 18:55:58 作者：佚名 
我要评论
我要评论点击这里返回网页教学网 HTML教程 栏目．想浏览CSS教程请点这里。
上文：标记语言——为文字指定CSS样式。
Chapter 14 图片替换
随着更多设计师与开发者开始使用标准(特别是CSS),每天都会有许多新技术被发现,达成相同目标的新方法,更好的方法也不断发展
方法B: Leahy / Langridge 图片替换法 (LIR)
同时被 Seamus Leahy(http://www.moronicbajebus.com/playground/cssplay/imagereplacement/)与Stuart Langridge(http://www.kryogenix.org/code/browser/lir/)发展出来,LIR法的目标是处理图片替换问题,而不需要用上FIR里无意义但又必要的<span>标签.
LIR不用display属性隐藏文字,而是把外包元素的高度(在这个例子中是<h1>)设为0,并将padding-top设成与替换图片高度相同,把文字挤开. 标记源代码和CSS
由于这个方法不需要额外的<span>标签,因此标记源代码能缩减成:
而把文字换成图14-4中的图片所需的CSS代码全在下面这段声明里:
图14-4 用图片编辑器建立的lir.gif
用来替换掉文字的图片高90像素,因此把上内部定设定为相同的数值.对大多数浏览器来说,我们把高度设为0,就等于把文字(或是包含在<h1>之内的其他任何东西)完全去掉了,我们用!important规则,确保取用这个值而不是使用之后的值(只给IE5 for Windows使用),符合规范的浏览器会忽略第二个height规则,但是IE5 for Windows会取用它. 凄惨的盒模型
最后一个规则会修正IE 5 for Windows错误解析CSS盒模型的问题(参见第十二章 "盒模型问题").由于IE5 for Windows会把内补丁累加在宽度,高度之内,因此需要特别为这个浏览器提供矫正过的数值.
在这个例子里,高度等于替换用的图片高度. 缺点
虽然方法B能够丢掉多余的<span>标签(修正标记源代码向来就是好事),但是它与方法A有个相同的缺点,那就是关掉图片,启用CSS的使用者啥都看不到.
另一个LIR的缺点,就是需要盒模型Hack才能使IE5 for Windows正常运作.
由于方法B没有使用display属性隐藏文字,因此我们能假设这个方法对使用屏幕阅读器的人来说是个比较好的选择.但是与方法A一样,Leahy / Langridge法使用时也要注意,要考虑"关闭图片显示 / 启用 CSS"时的可用性.
接着再来看一个由Mike Rundle发现的图片替换法变形.
同时被 Seamus Leahy(http://www.moronicbajebus.com/playground/cssplay/imagereplacement/)与Stuart Langridge(http://www.kryogenix.org/code/browser/lir/)发展出来,LIR法的目标是处理图片替换问题,而不需要用上FIR里无意义但又必要的<span>标签.
LIR不用display属性隐藏文字,而是把外包元素的高度(在这个例子中是<h1>)设为0,并将padding-top设成与替换图片高度相同,把文字挤开. 标记源代码和CSS
由于这个方法不需要额外的<span>标签,因此标记源代码能缩减成:
<h1 id="lir">Leahy/Langridge Image Replacement</h1>
而把文字换成图14-4中的图片所需的CSS代码全在下面这段声明里:
#lir {
padding: 90px 0 0 0;
overflow: hidden;
background: url(lir.gif) no-repeat;
height: 0px !important; /* for most browsers */
height /**/:90px; /* for IE5/Win */
}
图14-4 用图片编辑器建立的lir.gif
用来替换掉文字的图片高90像素,因此把上内部定设定为相同的数值.对大多数浏览器来说,我们把高度设为0,就等于把文字(或是包含在<h1>之内的其他任何东西)完全去掉了,我们用!important规则,确保取用这个值而不是使用之后的值(只给IE5 for Windows使用),符合规范的浏览器会忽略第二个height规则,但是IE5 for Windows会取用它. 凄惨的盒模型
最后一个规则会修正IE 5 for Windows错误解析CSS盒模型的问题(参见第十二章 "盒模型问题").由于IE5 for Windows会把内补丁累加在宽度,高度之内,因此需要特别为这个浏览器提供矫正过的数值.
在这个例子里,高度等于替换用的图片高度. 缺点
虽然方法B能够丢掉多余的<span>标签(修正标记源代码向来就是好事),但是它与方法A有个相同的缺点,那就是关掉图片,启用CSS的使用者啥都看不到.
另一个LIR的缺点,就是需要盒模型Hack才能使IE5 for Windows正常运作.
由于方法B没有使用display属性隐藏文字,因此我们能假设这个方法对使用屏幕阅读器的人来说是个比较好的选择.但是与方法A一样,Leahy / Langridge法使用时也要注意,要考虑"关闭图片显示 / 启用 CSS"时的可用性.
接着再来看一个由Mike Rundle发现的图片替换法变形.
相关文章
文章介绍了HTML中img标签的使用,包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，本文主要给大家介绍HTML img标签和超链2025-06-20- HTML meta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引，本文给大家介绍HTML中meta2025-06-20
input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTML input 标签，感兴趣的朋友一起看看吧2025-06-20
这篇文章主要介绍了html 滚动条滚动过快会留下边框线的解决方案,解决方法很简单，可以将 dialog 单独拿出来别放在 transform 的子元素里,需要的朋友可以参考下2025-06-09- 本文将介绍如何使用<img>标签在 HTML 中添加图片，并展示一些常见的用法和技巧,通过本文的介绍，应该掌握了在 HTML 中添加和调整图片的基础知识，感兴趣的朋友一起看2025-05-16
- HTML表格用于在网页上展示数据,通过标签及其相关标签来创建,表格由行和列组成,每一行包含一个或多个单元格,单元格可以包含文本、图像、链接等元素,本文将详细介绍HTML表格2025-03-12
- 本文介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点，感兴2025-02-24
在 Web 开发中，文本的视觉效果是提升用户体验的重要因素之一,通过 CSS 技巧，我们可以创造出许多独特的效果，例如文字镂空效果,本文将带你一步一步实现一个简单的文字镂空2024-11-17
在Html中,a标签默认的超链接样式是蓝色字体配下划线,这可能不满足所有设计需求,如需去除这些默认样式,可以通过CSS来实现,本文给大家介绍Html去除a标签的默认样式的操作代码2024-09-25- 在HTML中,可以通过设置CSS的resize属性为none,来禁止用户手动拖动文本域（textarea）的大小,这种方法简单有效,适用于大多数现代浏览器,但需要在老旧浏览器中进行测试以确保2024-09-25
最新评论