2024-01-11 10:00:02

使用css隐藏文本

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

<h1>My Website Title Here</h1>

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


当前回答

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

其他回答

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

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

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

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

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

使用条件标签不同的浏览器和使用css你必须放置 高度:0px,宽度:0px,你还必须放置字体大小:0px。

为什么不用:

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

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

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

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

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

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

这对我来说适用于span(敲除验证)。

<span class="validationMessage">This field is required.</span>

.validationMessage {
    background-image: url('images/exclamation.png');
    background-repeat: no-repeat;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: top;

    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}