How to replace text with pictures in CSS

Css

Today, a friend to do the Web page when encountered a problem: Want to keep the background of the link, but also the text disappeared in the link! But for a long time has not been able to remove this text. I think a lot of standards of friends have encountered this problem, here I have several commonly used methods to write out, the idea also talk about, hoping to help just start to learn friends.

"To change the word" is to use the picture to replace the text expression. We all know that the text in the browser in the form is very poor, there will be jagged, there is no way round there is no way to do a lot of results. In general, the content of the Web page is not required to do the effect, but in the Web standards for the logo, title, often need to use these. With the form, we just post a picture somewhere, which is simpler, but not good for searching. So we need to use the standard way to ensure that the Web page is in a good state and conducive to search. You usually replace text with a picture, and the picture shows the reservation and the text is not visible.

Show disappears: (Display:none;) This is not just to let the contents of the container disappear but to include the container itself. So we have to do a container inside the container to ensure that the missing part of the container, the background can be normal display. Cases:

<div id= "logo" > title content </div>
#logo {display:none; background:url; width:300px; height:100px;}

If this is the case, then you can't see anything at all. What is the right way to write it? See Example:

<div id= "logo" ><span> title content </span></div>
#logo {background:url; width:300px; height:100px;}
#logo span {display:none;}

Attention to the above code, the background is defined under the #logo, and #logo span in addition to display:none, there is no style. Because the display:none of a property is defined, the container for the attribute is not visible, and it is wasteful to define other styles. This is still a problem, this is a no link to the example, that there is a link to do? Let's look at another example:

<div id= "logo" ><a href= "URL" title= "title" > Title Content </a></div>
#logo {background:url; width:300px; height:100px;}
#logo a {display:none;}

Can you guess what this code shows? The fact is that the background is showing, but the link is gone. As we said above, the container that is assigned to the Display:none property will also disappear. Then we know that we need to add a container to this a tag. Let's look at the example again:

<div id= "logo" ><a href= "URL" title= "title" ><span> title content </span></a></div>
#logo {background:url; width:300px; height:100px;}
#logo a span {display:none;}

Is this the right thing to do? Or not, why, we all know that a is not a block-level label, that is, a width are content to determine, now the content has disappeared, there is no such a high width of the attribute, then the link has become a no hot zone link. It may not be a point. We need to revise the code above.

<div id= "logo" ><a href= "URL" title= "title" ><span> title content </span></a></div>
#logo a {background:url; width:300px; height:100px; display:block;}
#logo a span {display:none;}

Note that the attribute of the a tag here must be added to the Display:block; force it into block-level elements. So the a tag becomes a link form with a width of 300 to 100, and a background without text content. You can see that there is a span tag added to the a tag, which seems a bit superfluous. Can be achieved without span. Yes, but the idea is different, but the following position move method.

Position move: That is, let the content AH division to move the position, move out of the display area. Let's look at the code to understand this method.

<div id= "logo" ><a href= "URL" title= "title" > Title Content </a></div>
#logo, #logo a {width:300px; height:100px; overflow:hidden;}
#logo a {background:url; padding:100px 0 0; display:block;}

#logo and a in CSS are set to have an overflow hidden (overflow:hidden;) That means that there are more than 300*100 sizes that will be hidden. We see a is defined a padding:100px 0 0; The interior of the top is just pressing the contents outside the display area. Then why #logo also use Overflow:hidden? Because in IE there will be a small bug,a content can not overflow hidden so must be in the parent tag to add a overflow:hidden;

The above is only the two methods I use more commonly, of course there will be some other ways and means, these methods have their own shortcomings, but the various methods are complementary. You can choose to use it according to the situation when applying.