Question

我trying隐藏a标记中的文字（我用于屏幕阅读器），而是使用背景图标。

HTML

<a href="#"><span>Search</span></a>

CSS

span {
    display: none;
}
a {
    display: inline-block;
    width: 17px;
    height: 16px;
    background: url(http://i.stack.imgur.com/5c3zk.png);
}

有没有办法在没有span的情况下做同样的事情？

Answer 1

您可以缩进文字，使其完全脱离屏幕：

text-indent:-5000px;

Answer 2

我没有屏幕阅读器软件，但如果我猜对了，这应该可行：

<a href="#"><img src="http://i.stack.imgur.com/5c3zk.png" alt="Search" /></a>

使用此css规则：

a img {
    border:0;
}

基本上alt属性是替代文本，应该在屏幕阅读器的情况下使用。

Answer 3

您应该检查：Hide text using css

但它是这样的：

HTML：

<a href="#">Search</a>

CSS：

a {
    text-indent: -9999px;
    white-space: nowrap;  
    outline: none;

    display: inline-block;
    width: 17px;
    height: 16px;
    background: url(http://i.stack.imgur.com/5c3zk.png);
}

Here is the jsFiddle（我添加了背景色：红色;因为图片没有加载。）

希望它有所帮助。
欢呼声。

Answer 4

HTML

<a class="my-title" href="#">Search</a>

CSS

a.my-title { text-indent:-9999px }

或

HTML

<a class="my-title" title="Search" href="#"></a>

CSS

a.my-title { display:block;width:123px; all-your-styling:...; }

屏幕阅读器将捕获锚点中的标题属性。

使用CSS隐藏元素的文本

4 个答案: