Shulou(Shulou.com)06/03 Report--

This article mainly explains the "CSS image replacement technology solutions there are several", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "CSS image replacement technology solutions there are several" it!

Levin's plan:

Levin Alexander came up with a brilliant idea: instead of placing the text in the span, move it out of the span, put the text in the parent element with the span, then overwrite the text with this blank span, and apply the background image to the span. If all goes well, the screen reader will be able to access the text normally, fully considering and solving the accessibility problem of the blank page after the browser forbids the image. But a new problem arises, that is, the image cannot be transparent, otherwise the user will see the text below. The CSS code required to cut this solution is extremely lengthy and difficult to understand.

HTML Code:

XML/HTML Code copies content to the clipboard

And a dash of Thyme.

CSS Code:

CSS Code copies content to the clipboard

.replace {

Position:relative

Margin:0

Padding:0

}

.replace span {

Display:block

Position:absolute

Top:0

Left:0

Z-index:1

}

# myh2,#myh2 span {

Height:25px

Width:300px

Background:url (thyme.png)

}

Advantages: the screen reader can be accessed normally; solve the accessibility problem of the blank page after the browser forbids the picture.

Cons: transparent images cannot be used; CSS code is lengthy.

The scheme of Leahy and Langridge:

Both Seamus Leahy and Stuart Langridge independently discovered this method. This method eliminates the need to add those extra tags and hides the contents of the elements in the page while ensuring that the screen reader can read the text normally.

HTML Code:

XML/HTML Code copies content to the clipboard

I like cola.

CSS Code:

CSS Code copies content to the clipboard

# header {

Padding:25px 0 0 0

Overflow:hidden

Background:url (cola.gif) no-repeat

Height:0

}

Advantages: screen readers can be accessed normally, there is no extra.

Disadvantages: it does not solve the accessibility problem of blank pages after the image is disabled in the browser.

Fahrner's plan:

In March 2003, Douglas Bowman posted a technique (www.stopdesign.com/articles/replace_text) on his website Stopdesign that allows designers to replace the text in an element with a background image in order to show a more beautiful font. To show respect for the inventor Todd Fahrner, this technique was later called "Fahrner Image replacement (Fahrner Image Replacement,FIR)". The trick is simple: surround the text in the element with span, then hide the text in the span by applying the CSS style, and finally apply the background image to the element. For example, for the following paragraph of the HTML tag:

XML/HTML Code copies content to the clipboard

Css Zen Garden

We can easily use the following CSS to achieve image replacement:

CSS Code copies content to the clipboard

# pageHeader {

Background:url (lemonfresh.gif) top left no-repeat

Width:400px

Height:20px

}

# pageHeader span {

Display:none

}

By using CSS's display:none or visibility:hidden, all span elements in the # pageHeader element are hidden. Hellsing uses both of these CSS settings-but they do have the same effect. Image replacement technology is very powerful and quickly becomes popular-without it, we wouldn't even be able to build a Zen garden. This technology can be said to be one of the most important cornerstones for realizing complex and flexible CSS layouts.

Rundle's plan:

Designer Mike Rundle came up with a method of using negative text-indent attribute values to push the text beyond the left edge of the screen and the code is simple and elegant.

HTML Code:

XML/HTML Code copies content to the clipboard

Apple pie with cheddar?!

CSS Code:

CSS Code copies content to the clipboard

# header {

Text-indent:-5000px

Background:url (sample-image.gif) no-repeat

Height:25px

}

Pros: screen readers can be accessed normally; no extra; simple and elegant CSS.

Cons: it does not solve the problem of accessibility of blank pages after images are disabled in the browser.

Thank you for your reading, the above is the content of "CSS image replacement technology solutions have several", after the study of this article, I believe you have a deeper understanding of which CSS image replacement technology solutions have, and the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.