2024-01-11 10:00:02

使用css隐藏文本

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

<h1>My Website Title Here</h1>

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


当前回答

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

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

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

参见SAMPLE CODE

其他回答

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

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

h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}

跨浏览器最友好的方式是将HTML编写为

<h1><span>Website Title</span></h1>

然后使用CSS隐藏跨度和替换图像

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

如果你可以使用CSS2,那么还有一些更好的方法来使用内容属性,但不幸的是,web还没有100%做到这一点。

隐藏文本与可访问性:

除了其他答案之外,还有另一种有用的隐藏文本的方法。

此方法有效地隐藏了文本,但允许它对屏幕阅读器保持可见。如果需要考虑可访问性,可以考虑这个选项。

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

值得指出的是,这个类目前在Bootstrap 3中使用。


如果你对无障碍阅读感兴趣:

无障碍网页计划(WAI) MDN易访问性文档