How Can I Effectively Hide Text in HTML Using CSS While Displaying an Image?

Hide Text Using CSS

In HTML, a tag can be styled using CSS to replace its text with an image. However, the original text might still be visible within the tag's allocated space.

To address this, one technique is to push the text off-screen. This can be achieved with the following CSS property:

text-indent: -9999px;

This sends the text far off to the left, making it invisible. Additionally, to display the image, set the background-image property and specify its URL. Don't forget to define the height and width of the element to accommodate the image.

background-image: url(/the_img.png);
height: 100px;
width: 600px;

An alternative method is to hide the text while avoiding the creation of a large off-screen space:

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

By setting text-indent to 100%, the text is effectively shifted to the right by its own width, making it invisible. white-space: nowrap prevents the text from wrapping to the next line, and overflow: hidden clips any excess content.

The above is the detailed content of How Can I Effectively Hide Text in HTML Using CSS While Displaying an Image?. For more information, please follow other related articles on the PHP Chinese website!