如何使用CSS在显示图像时有效隐藏文本？-css教程-PHP中文网

如何使用CSS在显示图像时有效隐藏文本？

Linda Hamilton

发布： 2024-11-19 19:20:02

原创

997 人浏览过

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

使用 CSS 隐藏文本

使用 CSS 隐藏文本元素可用于各种设计目的。一种常见的情况是用图像替换文本作为徽标。本文解决了一个具体问题：如何在显示图像时有效地删除原始文本。

隐藏文本的解决方案

有多种方法可以使文本在显示图像时不可见保留元素的尺寸以用于图像放置。

方法 1：文本缩进

一种技术涉及使用文本缩进将文本推离屏幕：

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

登录后复制

方法 2：文本隐藏

另一种解决方案避免了负片产生的大的隐形盒子缩进：

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

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

登录后复制

两种方法都通过将文本推到屏幕外或将其隐藏在元素内来实现所需的结果。

以上是如何使用CSS在显示图像时有效隐藏文本？的详细内容。更多信息请关注PHP中文网其他相关文章！