2024-01-11 10:00:02

使用css隐藏文本

我有一个标签在我的html像这样:

<h1>My Website Title Here</h1>

使用css我想替换文字与我的实际标志。我已经得到的标志没有问题,通过调整标签和把背景图像通过css。然而,我不知道如何去掉这段文字。我以前见过,基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。


当前回答

只需添加font-size: 0;到包含文本的元素。

.hidden {font-size: 0;} 字体大小:0;隐藏文本。<span class="hidden">你看不到我:)</span>

其他回答

<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

以上在最新的雷鸟也工作得很好。

为什么不简单地使用:

h1 { color: transparent; }

在元素中使用0值的字体大小和行高对我来说是有用的:

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;

        font-size: 0;
        line-height: 0;
    }
</style>

<span class="text">
    Invisible Text
</span>

请参阅mezzoblue,了解每种技术的优点和缺点,以及html和css示例。

Jeffrey Zeldman提出了以下解决方案:

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

它的资源密集度应该小于-9999px;

请在这里阅读所有内容:

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/