One, Fahrner Image replacement (FIR)
< H2 > < span > Hello World</span></h2>
{ background:url (hello_world.gif) no-repeat; width: 150px; height: 35px;} { display: none;}
Problem: When a picture cannot be displayed, it will cause the area to have no content. At the same time, content that is hidden by using display:none will be ignored by many mainstream screen readers, causing usability problems and should be avoided as much as possible.
Two
< H2 > Hello World </ H2 >
{ text-indent: -5000px; background:url (hello_world.gif) no-repeat; width: 150px; height:35px;}
Problem: When a picture cannot be displayed, it will cause the area to have no content.
Three
< h2 > < span ></ span > hello World </ h2 >
{ width: 150px; height: 35px; position: relative;} { background: url (hello_world.gif) no-repeat; Position: absolute; width: 100%; height: 100%;}
Problem: The background map is not transparent, otherwise it will reveal the following text.
Reference from: Http://www.codebit.cn/topic/css.
CSS Picture Replacement text scheme