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

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

Patricia Arquette

发布： 2024-11-25 19:44:11

原创

685 人浏览过

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

使用 CSS 隐藏文本

在 HTML 中，可以使用 CSS 设置标签的样式，以将其文本替换为图像。但是，原始文本在标签分配的空间内可能仍然可见。

为了解决这个问题，一种技术是将文本推离屏幕。这可以通过以下 CSS 属性来实现：

text-indent: -9999px;

登录后复制

这会将文本发送到左侧很远的位置，使其不可见。此外，要显示图像，请设置background-image 属性并指定其URL。不要忘记定义元素的高度和宽度以容纳图像。

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

登录后复制

另一种方法是隐藏文本，同时避免创建较大的屏幕外空间：

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

登录后复制

通过将 text-indent 设置为 100%，文本会有效地向右移动其自身宽度，从而使其不可见。空白：nowrap 防止文本换行到下一行，溢出：隐藏剪辑任何多余的内容。

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