Use CSS to replace text with images

Document directory

• Fahrner image replacement (FIR)
• Phark Method
• Gilder/Levin Method

Abstract: Both browser and search engine are the best ways to display page content. However, due to font limitations, the display of pure text is gradually unable to meet the requirements of beautiful designers.

As a result, CSS is used to replace text with images. This method not only achieves various effects on the page, but also meets the needs of search engine optimization. Therefore, they are favored by web designers.

Whether it is for viewers or for search engines, text is the best way to display the page content. However, due to the limitations of fonts and other reasons, the display of pure text is gradually unable to meet the requirements of beauty designers.

As a result, CSS is used to replace text with images. This method not only achieves various effects on the page, but also meets the needs of search engine optimization. Therefore, this article introduces several common text and text Replacement Technologies.

• Fahrner image replacement (FIR)
• Phark Method
• Gilder/Levin method (recommended)

Fahrner image replacement (FIR)

This is the earliest text-and-text Replacement Technology proposed by Todd fahrner. It is easy to understand:

HTML code:
HTML:

 
 

  
  
 
  
  
  
  
 <span>Hello World</span> 
  
  
  
  
   
 
 

CSS code
CSS:

 
 

  
  
   
  
  
 <style type="text/css"> 
  
  
 h2 { 
  
  
 background:url(hello_world.gif) no-repeat; 
  
  
 width: 150px; 
  
  
 height: 35px; 
  
  
 } 
  
  
 span { 
  
  
 display: none; 
  
  
 } 
  
  
 </style> 
  
  
   
 
 

The code is very clear: first apply the image to the H2 background, and then hide the span tag. However, there is a problem with this method, that is, when the image cannot be displayed, there will be no content in this area. At the same time, the hidden content using the display: None method will be ignored by many mainstream screen readers, resulting in availability problems. Therefore, we should avoid using it whenever possible.

Phark Method

This technique was proposed by Mike Rundle, with the advantage that no additional labels are needed:

HTML code:
HTML:

 
 

  
  
   
  
  
  
  
 Hello World 
  
  
  
  
   
 
 

CSS code
CSS:

 
 

  
  
   
  
  
 <style type="text/css"> 
  
  
 h2 { 
  
  
 text-indent: -5000px; 
  
  
 background:url(hello_world.gif) no-repeat; 
  
  
 width: 150px; 
  
  
 height:35px; 
  
  
 } 
  
  
 </style> 
  
  
   
 
 

The Code is also very simple. Text is indented to hide the text. However, when the image cannot be displayed, the FIR problem still exists.

Gilder/Levin Method

This technology was proposed by Tom Gilder and Levin Alexander. It may be the most complete text and text Replacement Technology:
HTML code: HTML:

 
 

  
  
   
  
  
  
  
 <span></span>Hello World 
  
  
  
  
   
 
 

CSS code
CSS:

 
 

  
  
   
  
  
 <style type="text/css"> 
  
  
 h2 { 
  
  
 width: 150px; 
  
  
 height: 35px; 
  
  
 position: relative; 
  
  
 } 
  
  
 h2 span { 
  
  
 background: url(hello_world.gif) no-repeat; 
  
  
 position: absolute; 
  
  
 width: 100%; 
  
  
 height: 100%; 
  
  
 } 
  
  
 </style> 
  
  
   
 
 

First, set the position of H2 to relative, so that the element positioning in H2 takes H2 as a reference, and then absolutely positions the span element to fill the entire H2 region, at the same time, the background image is applied to the span label. The principle of this method is to overwrite the span label on the text content. Once the background image in the span cannot be displayed, the lower text content is displayed, normal use is not affected. However, this method also has a defect, that is, the background image cannot be transparent, otherwise the following text will be revealed.