2024-01-11 10:00:02

使用css隐藏文本

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

<h1>My Website Title Here</h1>

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


当前回答

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

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

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

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

其他回答

我通常使用:

span.hide
{
  position:fixed;
  right:-5000px;
}

用CSS替换内容

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }

不要使用{display:none;它使内容无法访问。您希望屏幕阅读器看到您的内容,并通过将文本替换为图像(如徽标)来视觉化它。text-indent: -999px;或者类似的方法,文本仍然在那里——只是没有视觉上的存在。使用display:none,文本就消失了。

为什么不用:

<li><a href="#">bla</a></li>

a {
    opacity: 0.0;
    font-size: 1px;
}

li {
    background-image: url('test.jpg');
}

如果你没有任何span或div元素,它可以完美地用于链接。

你可以通过添加这个属性来隐藏你的文本:

font-size: 0 !important;