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

This article mainly introduces the method of changing words with pictures in CSS, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand.

1. Text hiding

In the H2 tag, add a span tag to save the title content, and then set its style to display:none

two。 Negative indentation

By using text-index:-9999px, such a large negative indentation moves the text to an area outside the page

3. Negative margin

By using margin-left:-2000px, offset the box model to the left by 2000px, and then set the width to 2064px so that only the portion of the 64px in the 2064px is displayed on the page. Sets the background of the picture to be right-aligned and does not repeat

4. Go to padding

Because the background is displayed in the padding-box area, and the text is displayed in the content-box area. So, set height to 0, replace height with padding-top, and set overflow:hidden. You can display only the background and not the text

5.0 width and height

Save the text content by adding a span tag, set the width and height of the tag to 0, and then set the overflow to hide.

6. Text transparency

Set the color of the text to transparent, and set font-size to 1px to reduce the influence of line height.

7. Pseudo element

Use the before pseudo element, set content to the URL of the picture, and set the overflow hide on the H2 element

8. Positive indentation

Set text-indent:100%, to indent the text to the right of the width area of the parent element. Then set white-space:nowrap and overflow:hidden together so that the text does not wrap and overflows and hides. To hide the text content.

9. Font size

By setting font-size:0, you can set the font size to 0

Thank you for reading this article carefully. I hope the article "what are the ways to change words with CSS" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.