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

Today, I would like to share with you how CSS hides the text above the background of the picture. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

First, the CSS words used

According to the above description, the DIV CSS style words will be used as follows:

1. Css background-CSS background

2. Css text-indent-CSS indentation

3. Html an anchor text label

4. Css display:block display block

5. Css width width

6. Css height height

Explanation for the use of CSS attribute style words above

We use background background to set the picture as the background display.

Using text-indent indentation is to hide a-linked content

To use a link label is to set an anchor text link for text.

Extended reading:

1. CSS hiding content method

2. Css background

3. Css background color

4. Background picture

5. Css a style

6. Css mouse pointer

7. CSS hides content beyond the width and height limit of DIV

8. CSS solves the problem that the picture is too big to break open the DIV layout.

Second, the background picture hides the screenshot of the text above.

Picture as the background and html code can not see the picture, but the text also exists, but the text is hidden picture shows, the mouse can also click to point.

III. Actual use cases

Next, DIVCSS5 leads you to achieve the LOGO layout of the DIVCSS5 website (to hide the text content on the logo images while keeping the hyperlinks).

Extended reading: html img pictures

1. CSS code:

H2#logo {float:left;width:165px;height:60px; background:url (http://www..com/img201301/-logo-2013.gif) no-repeat 00} / * CSS Note: float settings float and set CSS width and CSS height CSS background to facilitate screenshots we wrap the CSS code * / h2#logo a {display:block;width:100%;height:100% Text-indent:-9999px} / * css Note: display:block allows the A tag in # logo to be displayed in blocks, and the text-indent is displayed at 100% height and 100% width of the superior. This attribute is CSS indentation style. If we set the 9999px to a negative value, the text inside the a tag is hidden. This shows the H2 tag background picture, hides the text and realizes the hyperlink to the An anchor text * /

2. HTML code:

DIV+CSS learning and resource sharing platform

3. Case effect

When the results are displayed in the browser, you can follow DIVCSS5 to give an example code to think about and complete the DIV+CSS practice, and test it in the browser.

Important explanation: originally HTML H2 tag set the text content, but set the "text-indent:-9999px" style, the essence is to let the text to the left translation 9999px distance, naturally in the general resolution display screen can not see the 9999px edge content, naturally use this CSS technique to achieve text hiding at the same time, the background picture display is normal.

These are all the contents of the article "how to hide the text above the background of a picture by CSS". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.