与背景图片链接答案

【问题标题】：Link with background image与背景图片链接
【发布时间】：2012-03-26 14:46:52
【问题描述】：

我有大约 10 个按钮，每个按钮都有图像文本和悬停状态。我想要做的是使用背景位置、宽度和高度来只显示背景图像精灵的一部分，并使用悬停背景位置来显示悬停样式。我还将在元素上使用图像替换类，以便它保持可访问性和可索引性。

所以（测量是随机的）：

[CSS]

.menu{background-image:url(path/to/sprite.png);}
.button-1{width:200px;height:30px;background-position:0 0;}
.button-1:hover{background-position:0 -30px;}
.button-2{width:250px;height:30px;background-position:100px 0;}
.button-2:hover{background-position:100px -30px;}
/* Image Replacement Class (H5BP, @necolas && BEM) */
.ir{border:0;font:0/0 a;text-shadow:none;color:transparent;background-color:transparent;}

[HTML]

<a href="someLink.html" class="menu button-1 ir">Button 1</a>
<a href="someOtherLink.html" class="menu button-2 ir">Button 2</a>

我想知道的是，这是否是一种好方法，或者应该以不同的方式进行，例如：

<a href="someLink.html"><img src="image.png" width="200" height="30" alt="Button 1"/></a>

然后用 JavaScript 交换悬停时的图像。

两者在可访问性和机器人方面有什么区别吗？

谢谢。

【问题讨论】：

我觉得不错。我唯一要做的就是重新审视设计，看看您是否可以仅仅为了可维护性而将文本保留为 HTML。
嘿。文本保持为 HTML 是什么意思？
我的意思是尽量不要用图像替换文本，即使它们是使用 CSS 应用的背景图像。我不知道您更换图像的原因 - 我只是不惜一切代价避免它。维护是一种痛苦。

标签： css image-replacement

【解决方案1】：

你所做的是正确的。不要忘记将display: block; 添加到该链接。您可以做的其他事情是将实际链接文本放在一个跨度中，然后将该跨度绝对定位在屏幕之外。像这样：

<a href="" title="Test link"><span>Home page</span></a>

在你的 css 文件中：

a > span {position: absolute; top: -10000px;}

【讨论】：

考虑使用text-indent: -100000px，而不是在标记中添加额外的跨度。
谢谢。我通常会尝试添加尽可能少的额外标记。 .ir 类负责隐藏文本，因此我不需要设置负文本缩进。
@alpacalips 这确实是另一种可以为您节省额外费用的可能性。但请注意，我们的两种技术对于搜索引擎来说并不真正被视为“合法”，因为垃圾邮件发送者经常使用它们。在此处阅读更多相关信息：luigimontanez.com/2010/stop-using-text-indent-css-trick Francisc：如果这是一个令人满意的答案，请将其标记为正确。