2024-01-11 10:00:02

使用css隐藏文本

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

<h1>My Website Title Here</h1>

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


当前回答

答案是使用该属性创建一个span

{显示:没有;}

你可以在这个网站上找到一个例子

其他回答

如果只是为了让元素内部的文本不可见,可以使用rgba值将color属性设置为不透明度为0,例如color:rgba(0,0,0,0);干净简单。

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

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

最好的答案适用于短文本,但如果文本换行,它只会显示在图像中。

一种方法是用jquery处理程序捕获错误。尝试加载一个图像,如果失败,它会抛出一个错误。

$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});

参见SAMPLE CODE

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

为什么不用:

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

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

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

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