css--Picture Substitution Method Comparison

Picture substitution refers to the technique of replacing text with a picture, that is, using text in an HTML statement, and displaying it with a corresponding picture when the browser is displayed. Its meaning is easy to do website optimization (SEO), text is the main object search engine.

The Classic replacement method:

1. Fahrner image substitution method (FIR)

Source:

Html:

Css:

#fir {

width:287px;

height:29px;

Background:url (fir.gif) no-repeat;

}

#fir span {

Display:none;

}

Explain:

First add a <span> tag, then use the Display property of the <span> tag to hide the text and finally specify the

Pros: Use CSS instead of markup syntax to provide a picture, change the picture simply by changing the CSS.

Cons: (1) requires a set of <span> tags that do not have any semantics to work (2) The Display property affects screen reader users (3) Closes the browser display picture, and when CSS support is enabled, the text picture is not displayed.

2. Leahy/langridge Image Replacement Method (LIR)

Source:

Html:

Css:

#lir {

Padding-top:imageheight;

Overflow:hidden;

Background:url (lir.gif) no repeat;

Height:0!important; For most browsers

Height:imageheight; For IE5

}

Explain:

First set the padding-top to the picture height, set the H1 height to 0 (set to picture height under IE5), according to the box model, the text content will be pushed out of the specified height, while setting the Overflow:hidden will overflow the text hidden.

Advantages: (1) Remove redundant <span> tags (2) Does not affect screen reader users

Cons: (1) When you close the browser display picture, while enabling CSS support, text pictures are not displayed (2) to IE5 for Windows use box model hack.

3. Phark Image Replacement Method

Source:

Html:

Css:

#phark {

Height:image height;

Text-indent: -5000px;

Background:url (phark.gif) no-repeat;

}

Explanation: Setting the Text-indent property to a large negative value will display the text outside the screen to achieve hidden effects.

Advantages: (1) No additional tags required (2) does not affect screen reader users

Disadvantage: When you turn off the browser display picture, while enabling CSS support, text pictures are not displayed

css--Picture Substitution Method Comparison