想要用图像替换文本，并且希望读屏器可以阅读文本。同时也希望当图像不可得时，文本是可以看见的。下面我们给大家介绍一下HTML文本替换的方法吧!

解决方案

在块状元素中插入一个空的,块状元素中包含你想要用图像替换的文本。将这幅图像设置为span的背景图像。

相对放置块且绝对放置span.这显示了span在块的前方。调整块和span的尺寸以适合这幅图像。因为块和span大小相同，并且span在块的前方， 所以span的背景图像覆盖了块中的文本。如果图像是不可得的，则浏览器将span的背景设置为透明，让文本显示出来。

为包含了你想替换的文本的块赋予独特的ID,并为它赋予样式，如下。

n    使用position:relative;为块定位，这样的背景图像可放置在文本的上方。

n    使用width和height设置块的尺寸来匹配图像大小。

n    使用padding:0;除去填充使文本可以显示出来。

n    使用overflow:hidden;确保长文本显示不出来，但是应注意，如果图像不能显示，显示的长文本会被截断。

在块中插入一个空的并为它赋予样式，如下。

n    使用position:absolute;、left:0;和top:0;将图像定位在块中的文本上。

n    使用width和height设置的尺寸，以匹配图像。

n    使用margin:0;去掉边缘，使文本能显示出来。

n    使用background-image:url("FILE.EXT")载入图像。

n    使用background-repeat:no-repeat保证图像不重复。

模式

HTML

TEXT

CSS

#UNIQUE-ID { position:relative; padding:0; overflow:hidden;

width:IMAGE_WIDTH;

height:IMAGE_HEIGHT; }

#UNIQUE-ID span { position:absolute; left:0; top:0; margin:0;

width:IMAGE_WIDTH;

height:IMAGE_HEIGHT;

background-image:url("FILE.EXT");

background-repeat:no-repeat; }

适用范围

此模式适用于任何块状元素、浮动元素、绝对定位或固定定位元素。

提示

文本替换对于使用翻转效果的链接和按钮效果最好。

以上就是我们给大家介绍的HTML文本替换的方法了。希望大家相聚关注我们的网站!