How to Effectively Hide Text While Displaying an Image Using CSS?

Invisible Text Using CSS

Hiding text elements using CSS can be useful for various design purposes. One common scenario is replacing text with an image as a logo. This article addresses a specific problem: how to effectively remove the original text while displaying the image.

Solutions for Hiding Text

There are multiple approaches to make text invisible while preserving the element's dimensions for image placement.

Method 1: Text Indentation

One technique involves pushing the text off-screen using text-indent:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;
    white-space: nowrap;            /* because only the first line is indented */
}

Method 2: Text Hiding

Another solution avoids the large invisible box created by negative indentation:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Both methods achieve the desired result by either pushing the text off-screen or hiding it within the element.

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