CSS Advanced tips: Picture replacement

Core tip: Image replacement technology is quite useful, especially the visual design, and to a certain extent will not affect the user base of the Non-visual browser (screen reader).

Image replacement technology is quite useful, especially for visual design, and does not affect the user base of non-visual browsers (screen readers) to some extent.
There is only one picture in this book:

In the text outsourcing a set of span tags, and in the CSS in the display:none operation of the span, so that it hidden, and then in the original text of the container in the CSS to add background-image to achieve image replacement.

<p id= "header" > revised Image replacement </p>

The CSS code is roughly as follows:

#header {width:329px;height:25px;background-image:url (sample-opaque.gif);} <br/> #header span {display:none;}

Disadvantages:
The screen reader skips over the definition of the Display:none container, causing the part of the user to be unable to get the current text content, and it requires a span tag that has no semantics at all to accomplish this effect. When the image is turned off and CSS is enabled, the user cannot get the content. Single pixel replace
Similar to classic fir, use span to hide text, in addition to the span, the original parent container with a 1-pixel transparent picture, and the hidden text added to the picture's ALT attribute, the use of the picture is not available, using ALT text to replace the image of the principle, so that the user in the closed image, You can also get text messages with CSS enabled.
The HTML code is as follows:

<p id= "header" ><br/><br/><span>revised Image replacement</span><br/></p>

The CSS code is roughly as follows:
#header {width:329px;height:25px;background-image:url (sample-opaque.gif);} <br/> #header span {display:none;}

Disadvantages:
No semantic tags. Radu method
Similar to the Phark method, the hidden effect is achieved by giving the text an external patch. Radu only runs in IE5
The HTML code is as follows:
<p id= "header" ><br/>revised Image replacement<br/></p> <br/>

The CSS code is roughly as follows:
#header {background:url (sample-opaque.gif) no-repeat top right;width:2329px;height:25px;margin:0 0 0-2000px;} <br/ >

Disadvantages:
You can't get content without turning off the image and opening the CSS. Leahy/langridge method
Using the features of Overflow:hidden and padding, the text achieves hidden effects.
The HTML code is as follows:

<p id= "header" ><br/>revised Image replacement<br/></p> <br/>

The CSS code is roughly as follows:
#header {<br/>padding:25px 0 0 0;<br/>overflow:hidden;<br/>background-image:url ( sample-opaque.gif); <br/>background-repeat:no-repeat;<br/>height:0px!important;<br/>height/** /:25px;<br/>} <br/>

Disadvantages:
Also in the closed image, open the case of CSS can not get content, and because of IE's box prototype problem, need to use hack. See translation for details. Phark method
The use of Text-indent features to achieve the effect of hidden text.
The HTML code is as follows:

<p id= "header" ><br/>revised Image Replacement<br/></p> <BR/>CSS code is roughly as follows: <br/> #header {<br/>text-indent: -100em;<br/ >overflow:hidden;<br/>background:url (sample-opaque.gif); <br/>height:25px;<br/>}
 
Disadvantage:
Also cannot be displayed in the case of closing the image, opening the CSS, and not running in IE5. The Phark Method 2
fixes the problem of safari displaying scrollbars in Phark 1 and the inability to run in IE5. The
HTML code is as follows:  
<p id= "header" ><br />revised Image replacement<br/></p> <br/>css code is roughly as follows: <br/> #header {<br/> Text-indent: -5000px;<br/>background:url (sample-opaque.gif); <br/>height:25px;<br/>}

Disadvantages:
Also can not be displayed in: Off the image, open the CSS case. Dwyer method
A variant of the classic FIR that utilizes the Overflow:hidden feature to enable all devices to obtain information, including non-visual browsers.
The HTML code is as follows:
<p id= "header" ><br/><span>revised Image replacement</span><br/></p>

The CSS code is roughly as follows:

#header {width:329px;height:25px;background-image:url (sample-opaque.gif);} <br/> #header span {Display:block;width:0;height:0;overflow:hidden} <br/>

Disadvantages:
The same cannot be shown in the case where the image is turned off and the CSS is turned on, and there is still a need for additional, semantic-free span tags. Gilder/levin method
solves the problem of displaying the CSS when the image is turned off, and makes it possible for almost all devices to get text information.
The HTML code is as follows:

<p id= "header" ><br/><span></span>revised Image replacement<br/></p> <br/ >

The CSS code is roughly as follows:
#header {width:329px;height:25px;position:relative;} <br/> #header span {background:url (sample-opaque.gif) no-repeat;position:absolute;width:100%;height:100%} <br/>

Disadvantages:
Use a completely blank, semantically labeled span, and replace with a picture if it is a transparent background, the text cannot be hidden. Lindsay method
Lindsay sets the text to 1px and sets the text color to replace the color with the background of the picture.
The HTML code is as follows:
<p id= "header" ><br/>revised Image replacement<br/></p>

The CSS code is roughly as follows:
#header {<br/>background:url (sample-opaque.gif) no-repeat;<br/>width:329px;<br/>height:25px; <br/>font-size:1px; <br/>color: #xxxxxx; <br/>}

Disadvantages:
You can only use a picture for substitution with a solid color background, and you cannot get information when you turn off the image to open CSS. Shea Enhanced Edition
Shea adds the title attribute to the container, and the title contains the text that will be hidden, in a way that achieves the effect of a mouse-activating ToolTip to get the user information.
The HTML code is as follows:
<p id= "header" title= "Revised image replacement" ><br/><span></span>revised image Replacement<br/></p>

The CSS code is as follows:
#header {width:329px;height:25px;position:relative;} <br/> #header span {background:url (sample-opaque.gif) no-repeat;position:absolute;width:100%;height:100%} <br/>

Disadvantages:
Extra whitespace without semantic span label ...
The above is almost all of the existing image replacement methods, each have advantages and disadvantages, according to their own situation to choose.