不论是对浏览者还是对搜索引擎,文字都是最佳的页面内容展示方式,但是,由于字体等原因的限制,纯文字的展示渐渐无法满足爱美的设计师的要求。于是,出现 了通过 CSS 来实现用图片替换文字的方法,这种方式既能实现页面上各种丰富的效果,搜索引擎仍然可以搜索HTML文本,而果禁用CSS,文本仍然会显示。因此,深受网 页设计师的喜爱,本文介绍了几种常见的图文替换技术。
- Fahrner Image Replacement (FIR)
- Phark 的方法
- Gilder/Levin 的方法 (推荐)
1.Fahrner Image Replacement (FIR)
这是最早出现的图文替换技术,是由 Todd Fahrner 提出的,非常容易理解:
HTML 代码:
<h2>
<span>Hello World</span>
</h2>
CSS 代码:
h2 {
background:url(hello_world.gif) no-repeat;
width: 150px;
height: 35px;
}
span {
display: none;
}
代码非常明白:先将图片应用在 H2 的背景中,然后将 SPAN 的标签隐藏。但是这种方式有个问题,就是当图片无法显示时,将导致这个区域没有任何内容。同时,使用 display:none 的方式隐藏的内容,将被许多主流屏幕阅读器忽略,从而造成可用性问题,因此,应该尽量避免使用。
2.Phark 的方法
这种技术是由www.phark.net 的 Mike Rundle 发明的一种适合屏幕况读器的图像替换技术,好处是不需要额外的标签。
HTML 代码:
<h2>
Hello World
</h2>
CSS 代码:
h2 {
text-indent: -5000px;
background:url(hello_world.gif) no-repeat;
width: 150px;
height:35px;
}
代码也非常简单,通过文本缩进,将文字隐藏,但是,当图片无法显示时,依然存在 FIR 的问题。
浏览器支持:
Windows——IE 5.5及以上版本、Netscape 7、Opera 6及以上版本、FireFox;
苹果机——IE 5.2、Safari、FireFox。
3.Gilder/Levin 的方法
这种技术是由 Tom Gilder 和 Levin Alexander 共同提出的,这也许是一个最完善的图文替换技术了:
HTML 代码:
<h2>
<span></span>
Hello World
</h2>
CSS 代码:
h2 {
width: 150px;
height: 35px;
position: relative;
}
h2 span {
background: url(hello_world.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
首先,将 H2 的 position 设为 relative ,这样将使 H2 里面的元素定位以 H2 为参照,然后将 SPAN 元素绝对定位,撑满整个 H2 区域,同时将背景图应用在 SPAN 标签里面;这种方法的原理是将 SPAN 标签覆盖在文字内容上面,一旦 SPAN 里面的背景图无法显示,将显示下层的文字内容,不影响正常使用。但是,此方法也有一个缺陷,就是背景图不能透明,否则将透出下面的文字。
浏览器支持:
Windows——IE 5.5及以上版本、Netscape 7、Opera 6及以上版本、FireFox;
苹果机——IE 5.2、Safari、FireFox。
分享到:
相关推荐
它通过Flash + JS + CSS联合实现在不替换页面中文本元素的情况下,对文本进行更为细腻准确的效果渲染。 使用sIFR你可以任意定义WEB中的文本字体,即便是客户端浏览器未安装的字体。sIFR使用Flash渲染字体效果,...
在文字外包上一组span标签, 并在CSS中将这个span进行display:none 操作, 使其隐藏, 然后在原文字的容器的CSS中加上background-image, 以达到图像替换. HTML代码如下: <h3 id=header> <span>Revised Image ...
介绍: 通过CSS进行定义的图片框架,主要是结合Image Replacement,定位平移的方法。当鼠标经过时边框的背景图片通过平移而产生效果。
Browser inconsistencies are the thorn in most CSS developers' sides, so we have dedicated two whole chapters to CSS hacks, filters, and bug fixing, as well as looking at image replacement; ...
特别声明:此篇文章根据Stéphanie Walter 的英文文章《The Mobile Web: CSS Image Replacement for Retina Display Devices 》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友...
lru页面替换算法的模拟实现程序。 操作系统实验课上做的
它通过Flash + JS + CSS联合实现在不替换页面中文本元素的情况下,对文本进行更为细腻准确的效果渲染。 使用sIFR你可以任意定义WEB中的文本字体,即便是客户端浏览器未安装的字体。sIFR使用Flash渲染字体效果,...
edem软件颗粒替换,快速填充,用于模拟岩石破碎,磨机矿石破碎效率分析
它通过Flash + JS + CSS联合实现在不替换页面中文本元素的情况下,对文本进行更为细腻准确的效果渲染。 使用sIFR你可以任意定义WEB中的文本字体,即便是客户端浏览器未安装的字体。sIFR使用Flash渲染字体效果,...
Replacement of pixels within a dicom file
此外,它提供了一种使用任何解析插件(例如 )链接别名的方法,请参见下面的示例。 让我们看一个例子: // rollup.config.js import replacement from "rollup-plugin-module-replacement" ; const appTarget = ...
定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。 语法 stringObject.replace(regexp/...一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹
“abcabbc”,这个字符串如果使用上边的函数来把其中的b替换掉,那么他会全部替换掉,但是如果你想只替换一个或两个怎么办呢?看下边的解决方法: 这是个比较有点意思的问题,正好之前也做过类似的处理,当时我是直接...
Enjoy Advanced Search and Replacement Supports UTF-8, UTF-8 without BOM and UTF-16 Supports various plugins and even your proprietary plugins And… Required system Windows 10 Windows 8 / 8.1 Windows 7
自适应替换缓存 自适应替换缓存算法优于LRU
matlab代码替换挥发性有机化合物替代 VOC替换项目的代码 Matlab脚本“ VOC_replacement.m”,用于再现手稿的图形和模拟: Wu,Scarabel,Majeed,Bragazzi,Orbiski,公共卫生干预措施对延迟和缓解SARS-CoV-2引起...
Cache Replacement Policies Revisited The Case of P2P Traffic
LRU replacement policy 解释了s3c44b0x cache的行替换策略 • each bit represents one branch point in a binary decision tree • let 1 represent that the left side has been referenced more recently than ...
Atom-atom-replacement-icon.zip,atom文本编辑器的替换图标原子替换图标,atom是一个用web技术构建的开源文本编辑器。
将整个/wordpress-responsive-image-replacement目录上载到/wp-content/plugins/目录。 通过WordPress中的“插件”菜单激活WordPress响应式图片替换。 使用说明 该插件利用了WordPress应用于图像的内置类。 例如,...