Both for visitors or search engines, text is the best way to show the page content, however, due to reasons such as font, text display gradually unable to meet the requirements of designers of the beauty. As a result, there has been a method implemented by CSS to replace text with images, in this way not only to achieve a rich variety of effects on the page, the search engine can still search text HTML, CSS and fruit disabled, text is still displayed. Therefore, by the web page designer's favorite, this article describes several common graphic replacement technology.

• Fahrner Image Replacement (FIR)
• Phark method
• Gilder / Levin's method (recommended)

1.Fahrner Image Replacement (FIR)

This is a graphic replacement technology first appeared, was presented by Todd Fahrner, very easy to understand:

HTML code:

<h2>
<span>Hello World</span>
</h2>

CSS code:

h2 {
background:url(hello_world.gif) no-repeat;
width: 150px;
height: 35px;
}
span {
display: none;
}

 

The code is very clear: first pictures used in the context of H2, then the SPAN tag hidden. But this way there is a problem, that is, when the picture can not be displayed, this area will lead to nothing. At the same time, the use of display: none ways to hide content that will be overlooked by many mainstream screen reader, causing availability problems, therefore, should be avoided if possible.

2.Phark method

This technique is made from a Mike Rundle invention www.phark.net conditions suitable screen image reading section replacement techniques, no additional benefit is the label.

HTML code:

<h2>
Hello World
</h2>

CSS code:

h2 {
text-indent: -5000px;
background:url(hello_world.gif) no-repeat;
width: 150px;
height:35px;
}

 

Code is also very simple, via text indentation, hidden text, however, when the picture can not be displayed, FIR problem still exists.

Browser support:
Windows - IE 5.5 and above, Netscape 7, Opera 6 and above, FireFox;
Mac --IE 5.2, Safari, FireFox.

3.Gilder / Levin method

This technology was developed by Tom Gilder and Levin Alexander jointly proposed, which is probably one of the most comprehensive technology to replace the graphic:

HTML code:

<h2>
<span></span>
Hello World
</h2>

CSS code:

h2 {
width: 150px;
height: 35px;
position: relative;
}
h2 span {
background: url(hello_world.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

 

First, the position H2 is set to relative, so will the elements positioned inside H2 H2 as a reference, and the SPAN element absolute positioning, supporting H2 over the entire area, while the background image inside the SPAN applied; such a method SPAN tags principle is overlaid text above, once inside the SPAN background can not be displayed, displays the text of the lower layer does not affect the normal use. However, this method also has a drawback, is that the background image can not be transparent, otherwise revealing the text below.

Browser support:
Windows - IE 5.5 and above, Netscape 7, Opera 6 and above, FireFox;
Mac --IE 5.2, Safari, FireFox.