css--Picture Substitution Method Comparison

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.