Several methods and ideas for exchanging pictures for words_Experience exchange

Today, a friend encountered a problem when making a web page: he wanted to keep the background of the link, but also wanted the text in the link to disappear! But after working on it for a long time, I still couldn't get rid of this text. I think many friends who study standards have encountered this problem. Here I will write down several commonly used methods and explain the ideas, hoping to help friends who are just starting to learn.

"Replace pictures with words" means replacing text expressions with pictures. We all know that the representation of text in browsers is very poor. It is jagged, cannot be rounded, and cannot have many effects. Under normal circumstances, the content part of a web page does not need to be effected, but in WEB standards, these are often needed for logos and titles. If we use a table to do it, we just post a picture somewhere. This method is relatively simple, but it is not conducive to search. So we need to do it in a standard way to ensure that the web page is in a good state and is conducive to search. Usually displayed as shown in the figure

: (display:none;) This does not just make the contents of the container disappear but also the container itself. Therefore, we must make another container within the container to ensure that the background in the container can be displayed normally after the inner part disappears. Example:

If it is written like this, you will not see anything at all. So what is the correct way to write it? Look at the example:

Please pay attention to the above code , the background is defined under #logo, and #logo span has no style except display:none;. Because the container with the display:none; attribute defined will not see anything, it is a waste to define other styles. There are still problems with this alone. This is an example without a link. So what should we do when there is a link? Let’s look at another example:


Can you guess what this code can display? The fact is that the background is displayed, but the link is gone. As we said above: the container itself that is assigned the display:none; attribute will also disappear. Then we know clearly that we must add a container to this A tag. Let’s look at the example again:

Is this correct? Still not working, why? We all know that A is not a block-level tag, which means that the height and width of A are determined by the content. Now that the content has disappeared, the height and width attributes will no longer exist, so the link will be It has become a link without a hot zone. It may not be lit. We need to modify the above code again.


Note that the attribute of the A tag here must be added with display:block; to force it to be a block-level element. In this way, the A tag becomes a link form with a width of 300 and a height of 100, with a background and no text content. Everyone saw that a span tag was added to the A tag above, which seems a bit redundant. Can the effect be achieved without span? Yes, but the idea is different, it is the following position shifting method.

Position movement: that is, the content is moved out of the display area. Let’s look at the code to understand this method.

In CSS, #logo and A have an overflow hidden (overflow:hidden;), which means that if the size exceeds 300*100, it will be hidden. . We see that A is defined with a padding: 100px 0 0; This top padding just pushes the content outside the display area. So why does #logo also use overflow:hidden;? Because there will be a small bug under IE, the content of A cannot overflow and hide, so it is necessary to add an overflow:hidden on the parent tag;

The above are just two of my more commonly used methods. Of course, there are other methods, each of which has its own shortcomings, but the various methods are also complementary to each other. You can choose to use it according to the situation when applying.