缩进背景图像占位符文本以从视图区域

Question

是的，所以，我已经获得了一个通常高质量，可靠的来源，在创建包含文本的链接图像时，最佳做法如下：

1. 在锚元素中创建一些占位符文本，如下所示：

   <a class="logoWithText" href="logoWithText.raw">Mr Happy Forever Foobar</a>

2. 更改元素CSS以在查看窗口外缩进此文本：

   .logoWithText { background-image: logoWithText; width = 200px; height = 100px; display: inline-block; text-indent: -9999px; }

这个想法是，如果不这样做，如果在用户的机器上关闭CSS，或者他们试图用屏幕阅读器查看它，他们就会在查看图像时遇到问题。但是这样他们只会在CSS被关闭的情况下看到文本，并且它将被正确定位。

但是如果由于某种原因图像无法加载但是他们确实打开了CSS呢？用户根本不会看到占位符文本...而且我也非常不安，因为整个将文本全部放在屏幕上，就其本身而言因为它看起来非常不优雅而且我担心编写完全违反语言逻辑的代码可能存在各种不可预见的问题。

任何人都可以建议一个解决方案来解决 损坏的图像链接和用户设备上缺少CSS支持的问题，哪些会更多立即直观的人们查看代码？如果真的没有别的方法可以做到这一点，或者你们认为我的方法完全错误或者其他什么都没问题，我只想知道我是否以正确的方式处理事情。< / p>

Answer 1

为什么不

HTML

<a href="http://yoururl.com" class="logo--text">
    <img src="zoidberg.jpg" alt="This is the text that shows up when your image is broken">
</a>

CSS

.logo--text{ width:200px; height:100px; }