Replace text with CSS images

Summary: Both for visitors or search engines, text is the best way to show the page content, however, due to reasons such as font, text display gradually unable to meet the requirements of designers of the beauty.

then, there has been a method implemented by CSS to replace text with images, in this way not only to achieve a rich variety of effects on the page, but also to meet the needs of search engine optimization. Therefore, by the web designer's favorite.

both for visitors or search engines, text is the best way to show the page content, however, due to reasons such as font, text display gradually unable to meet the beauty of the designer requirements.

then, there has been a method implemented by CSS to replace text with images, in this way not only to achieve a rich variety of effects on the page, but also to meet the needs of search engine optimization. Therefore, by the web designer's favorite, this article describes several common graphic replacement technology.

Fahrner Image Replacement (FIR)
Phark method
Gilder / Levin's method (recommended)

Fahrner Image Replacement (FIR)

This alternative technique is the earliest graphic, proposed by Todd Fahrner, is easily understood:

HTML code for:
HTML:

<h2>
<span>Hello World </span>
</h2>

CSS codes
CSS:

<style type= "text/css">
h2 {
background: url (hello_world.gif ) no-repeat;
width: 150px;
height: 35px;
}
span {
display: none;
}
</style>

code is clear: first image H2 in the context of the application, and then hide the SPAN tags. But this way there is a problem, that is, when the picture can not be displayed, this area will lead to nothing. At the same time, the use of display: none ways to hide content that will be overlooked by many mainstream screen reader, causing availability problems, therefore, should be avoided if possible.

Phark method

This technique was proposed by Mike Rundle, no additional benefit is tags:

HTML Code: HTML:

<h2>
Hello World
</h2>

CSS codes
CSS:

<style type= "text/css">
h2 {
text-indent: -5000px;
background: url (hello_world.gif ) no-repeat;
width: 150px;
height:35px;
}
</style>

code is also very simple, via text indentation, hidden text, however, when the picture can not be displayed, FIR problem still exists.

Gilder / Levin method

This technology was developed by Tom Gilder and Levin Alexander jointly proposed, which is probably one of the most comprehensive technology to replace the graphic: HTML Code: HTML:

<h2>
<span> </span>Hello World
</h2>

CSS codes
CSS:

<style type= "text/css">
h2 {
width: 150px;
height: 35px;
position: relative;
}
h2 span {
background: url (hello_world.gif ) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>

First, the position H2 is set to relative, so will the elements positioned inside H2 H2 as a reference, and the SPAN element absolute positioning, supporting H2 over the entire area, while the background application of the SPAN inside; principle of this method is to cover the SPAN tags in the above text, once inside the SPAN background can not be displayed, the text displayed in the lower layer does not affect the normal use. However, this method also has a drawback, is that the background image can not be transparent, otherwise revealing the text below.

Reproduced in: https: //www.cnblogs.com/jcdmt/archive/2008/07/05/1236342.html

Intelligent Recommendation

[Css] Replace with ellipsis when the text is too long

...

Css text and fonts, links, backgrounds, images

1, Css text and font design Color sets the color of the text, such as: color:red; Font-size Set the size of the text, such as: font-size: 12px; Font-family Set the font of the text, such as: font-fami...

CSS text, images, content, DIV and other centrally

Div in Div center Div text centered Div centered in the picture method one: Method two: (old system does not support, such as slag slag IE10) Method three: Method four: &nb...

How to use CSS to set the transparency of text or images?

How to use CSS to set the transparency of text or images? The following article will introduce to you how to use CSS to set the transparency of text or images. I hope it will be helpful to you. To use...

CSS images and text are vertically centered on a straight line

CSS images and text are vertically centered on a straight line...