如何讓HTML文本替換？

想要用圖像替換文本，並且希望讀屏器可以閱讀文本。同時也希望當圖像不可得時，文本是可以看見的。下面我們給大家介紹一下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文本替換的方法了。希望大家相聚關注我們的網站!