2

我试图在标签中隐藏文本（我用于屏幕阅读器），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？

4

4 回答 4

3

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

text-indent:-5000px;
于 2013-02-26T17:44:22.743 回答
2

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

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

使用此 CSS 规则：

a img {
    border:0;
}

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

于 2013-02-26T17:44:46.063 回答
2

您应该检查：使用 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);
}

这是 jsFiddle（我添加了背景颜色：红色；因为图像没有加载。）

希望能帮助到你。
干杯。

于 2013-02-26T17:48:22.940 回答
1

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:...; }

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

于 2013-02-26T17:50:33.193 回答