Image substitution of CSS

• Time:2016-03-30 20:00

  This month is a bit busy, the work of the school of things personal things a little annoying, but can not stop learning more can not forget to write blog! Recently read the book "Proficient in CSS", picked a point to record a bit.

I. Meaning

Image substitution, just like we usually add text to the text, and then through the CSS hidden text in its position to display a background image, so that the search engine can still search the HTML text, even if we disable the CSS, the text can still be displayed.

A quote from the "CSS Mastery" section explains:

HTML text is made up of many advantages. Text can be read by search engines, which developers can copy and paste, and change the font size in a browser. So many designers want to try to use HTML text rather than text images, but unfortunately, the page designer for the text has a limited choice, although you can control the layout through CSS, but there are many font effect is not possible, so in some cases still need to use the text image. Image substitution, just like we usually add text to the text, and then through the CSS hidden text in its position to display a background image, so that the search engine can still search the HTML text, even if we disable the CSS, the text can still be displayed.

A quote from the CSS Zen garden:

Image substitution technology The intention of using Display:none is not just to replace text, but there are some deeper reasons to do so. In fact, without any hint or help, the computer cannot recognize or read the text contained in the image. For example, the IMG element in HTML, if there is no ALT attribute, and so on Google and other search engines, as well as the auxiliary browsing device (for example, screen reader can read the page content, and in the form of sound to tell the viewer), such as the inability to render the image of the client, will be proud of no meaning. The image substitution technique retains the original text in the replaced element, so it is not problematic for any customer to understand the content of the page.

Two. Image replacement implementation Method 1. Classic fir, try to hide the text content: (Fahrner image replacement)

The first popular image substitution technology is also easiest to understand, but there are some accessibility issues that should be avoided.

(1) Place the text you want to replace in the span tag:

<span>hello World <span>

(2) Then apply the replacement image as a background to the text element,

h2{

Background:url (replace picture. gif) no-repeat;

width:150px;

height:35px;

}

(3) Set the display of span to none to hide the contents of the span.

span{

Display:none;

}

A problem exists:

Many popular screen readers ignore elements of display:none and Visibility:hidden because they ignore the text completely, causing serious access problems.

2. Set the margin or indent to bounce the text away: Phark

You do not need to add a non-semantic tag or use the Display property to hide the text, only the first line of very large negative values for the text you want to replace is entered.

Hello World

h2{

width:150px;

height:35px;

text-indent:-5000px (Very large negative value in the first line)

Background:url (replace picture. gif) no-repeat;

}

This method solves the problem of screen reader very well, but it is invalid in the case of turning off the image still open CSS, although this situation is relatively small, in the case of very slow network access or the visitor can open the image but the settings do not open, in these cases some people will not see the replaced text.

3.Leahy and Langridge methods

This method eliminates the need to add extra tags, and also hides the contents of the elements in the page while guaranteeing that the screen reader can read the text normally. However, there is no solution to the accessibility issues of blank pages after the browser disables the image.

Hello World

h2{

height:0;

padding:30px 0 0 0;

Overflow:hidden;

Background:url (replace picture. gif) no-repeat;

}

4. Overlay text with extra elements: Levin method

Levin Alexander came up with a brilliant note: Instead of placing text in a span, it moved it out of span, put the text and span together in the parent element, and then used the blank span to overwrite the text and apply the background image to the span. Cumbersome code, finally the perfect solution to turn off the image to open the CSS problem, but the new problem also arises, that is, the image can not be transparent, otherwise the user will see the following text. In addition, the text content is not directly included in any node, may bring unexpected trouble to the front-end development.

. replace{

position:relative;

margin:0;

padding:0;

}

. Replace span{

Display:block;

Position:absolute;

top:0;

left:0;

Z-index:1;

}

/#myh1, #myh1 span{

height:25px;

width:300px;

Background:url (replace image. png);

}

Five. Based on Flash and Javascript:sfir

Mike Davidson and Shaun Inman proposed a new ifir technique. This method uses JavaScript to search for the text
A specific node in the file, replacing the content with a small flash.

The introduction of this technique by referring to the "master CSS" D:

Flash allows fonts to be embedded in the SWF file, so instead of replacing the text with an image, they replace the text with a flash file. The way to do this is to use JavaScript to search for a document, find a specific element, or all the text in an element with a specific class name. Then JavaScript replaces the text with a small flash file. The next is the really smart part. Instead of creating a separate flash file for each piece of text, this technique puts the replaced text back into a duplicate flash file. So, triggering an image replacement is just a matter of adding a class, and flash and JavaScript will do the rest of the work. Another benefit is that the text in the Flash file is searchable, which means that it can be easily copied.

There is a problem: the disadvantage of using flash substitution is that the method requires JavaScript and flash support, and Flash will be much larger than a normal picture, the download will cause a delay, on the slower computer page will appear flickering or even stalled.

There is no perfect method for image replacement at the moment, but it can be traded at minimal cost. For example, you can use the Levin method on mobile devices, because the general mobile device does not use transparent pictures. At home, screen readers are not yet popular, sacrificing screen readers can also be considered.

Image substitution of CSS