2024-01-11 10:00:02

使用css隐藏文本

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

<h1>My Website Title Here</h1>

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


当前回答

这实际上是一个成熟的讨论领域,有许多微妙的技术可用。重要的是,你选择/开发一种技术,以满足您的需求,包括:屏幕阅读器,图像/css/脚本打开/关闭组合,seo等。

这里有一些很好的资源,让你开始使用标准化图像替换技术:

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

其他回答

有这么多复杂的解决方案。

最简单的使用方法是:

color:rgba(0,0,0,0)

我做到这一点的方法之一是使用:before或:after。我已经使用这种方法好几年了,尤其适用于字形矢量图标。

h1 {
    position: relative;
    text-indent: -9999px;                 /* sends the text off-screen */
    }
h1:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 600px;
    height: 100px;
    content: ' ';
    background: transparent url(/the_img.png) 0 0 no-repeat;
    }

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

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

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

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

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

font-size: 0 !important;

要在html中隐藏文本,使用css中的text-indent属性

.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}

/*对于动态文本,您需要添加空白,这样您应用的CSS将不会打扰。Nowrap意味着文本永远不会换行到下一行,文本将继续在同一行上,直到遇到<br>标记