标记语言——图片替换
互联网 发布时间：2008-10-17 18:55:58 作者：佚名 
我要评论
我要评论点击这里返回网页教学网 HTML教程 栏目．想浏览CSS教程请点这里。
上文：标记语言——为文字指定CSS样式。
Chapter 14 图片替换
随着更多设计师与开发者开始使用标准(特别是CSS),每天都会有许多新技术被发现,达成相同目标的新方法,更好的方法也不断发展
方法C: Phark法
网络最棒的地方,就是一只会有人改进现有技术,寻找出要完成相同目标可用的不同方法.在2003年8月,开发者Mike Rundle制造出自己的图片替换法变形(http://phark.typepad.com/phark/2003/08/accessible_imag.html),以特殊的点子,为想要隐藏的文字指定很大的负数text-indent值.文字理论上仍然会出现在屏幕上,但是超出显示范围太多,就算在最大的屏幕上也不会显示出来,这真是聪明的方法. 标记语言和CSS
与方法B类似,Phark法(以Mike网站的昵称为名)同样不需要额外的标签就能正常运作.使用方法C后标题标记源代码就像这样:
这个方法不必用上FIR法额外需要的<span>标签,让我们看看隐藏文字,把它置换成图14-5中的图片所需的简单CSS内容:
图14-5 我们用来替换文字的高26像素的图片phark.gif
如你所见,方法C是目前最简单的方法,不需要打上盒模型Hack或额外的标签,通过为文字设定夸张负缩进值,就能把文字推到屏幕之外,让使用者看不见它的内容.
与方法B一样,使用这个方法的时候,屏幕阅读器的使用者应该也能正常听到标题文字的内容,这的确是个进步. 仍然不完美
虽然Phark法最容易实现,但是它仍然会在"关闭图片显示,启用CSS"的情况下发生问题,虽然听起来实在不容易发生,但是这代表了在撰写这段文字的时候,暂时还没有完美的解决方法可用.
让我们复习一下先前展示的三种方法,并且归纳它们的差异.
网络最棒的地方,就是一只会有人改进现有技术,寻找出要完成相同目标可用的不同方法.在2003年8月,开发者Mike Rundle制造出自己的图片替换法变形(http://phark.typepad.com/phark/2003/08/accessible_imag.html),以特殊的点子,为想要隐藏的文字指定很大的负数text-indent值.文字理论上仍然会出现在屏幕上,但是超出显示范围太多,就算在最大的屏幕上也不会显示出来,这真是聪明的方法. 标记语言和CSS
与方法B类似,Phark法(以Mike网站的昵称为名)同样不需要额外的标签就能正常运作.使用方法C后标题标记源代码就像这样:
<h1 id="phark">The Phark Method</h1>
这个方法不必用上FIR法额外需要的<span>标签,让我们看看隐藏文字,把它置换成图14-5中的图片所需的简单CSS内容:
图14-5 我们用来替换文字的高26像素的图片phark.gif
#phark {
height: 26px;
text-indent: -5000px;
background: url(phark.gif) no-repeat;
}
如你所见,方法C是目前最简单的方法,不需要打上盒模型Hack或额外的标签,通过为文字设定夸张负缩进值,就能把文字推到屏幕之外,让使用者看不见它的内容.
与方法B一样,使用这个方法的时候,屏幕阅读器的使用者应该也能正常听到标题文字的内容,这的确是个进步. 仍然不完美
虽然Phark法最容易实现,但是它仍然会在"关闭图片显示,启用CSS"的情况下发生问题,虽然听起来实在不容易发生,但是这代表了在撰写这段文字的时候,暂时还没有完美的解决方法可用.
让我们复习一下先前展示的三种方法,并且归纳它们的差异.
相关文章
文章介绍了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
最新评论