为 css 图像获取 alt 的解决方法答案

【问题标题】：workaround for getting alt for a css image为 css 图像获取 alt 的解决方法
【发布时间】：2015-06-04 06:11:05
【问题描述】：

我知道我们不能为 css 生成的图像设置 alt。有一些解决方案表明，通过 title 属性，我们只能获得 alt 效果悬停在图像上，但是当我们禁用 css 时，我们将无法看到代替图像的文本。在我的情况下 我需要显示文本，即使 css 是禁用。是否有任何解决方法可以在禁用 css 时使文本可见。

    <span class="myimageclass">
    hi
    </span>
    <style>
    .myimageclass
    {
    height: 100px;
    width: 200px;

    background-image:url('http://cdn.osxdaily.com/wp- 
    content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png');
    color:red;
    overflow: hidden;
    text-indent: -9999px;



    }
    </style>

谢谢，巴拉吉。

【问题讨论】：

是的 alt 仅适用于 img 标签，您不能为 CSS 生成的图像提供该标签。但是，您可以使用 javascript 来检测 CSS 是否缺失，然后在 CSS 被禁用时输入文本。
感谢您的回复，因此使用 javascript 是唯一的选择。
恐怕是这样，因为这是 CSS 生成的图像，这可能是现在最好的选择。启用 CSS 后，您将需要另一种机制来显示替代文本，而 javascript 可以扮演该角色。
好的，我会尝试按照您的方式进行操作，谢谢 :)

标签： html css accessibility attr-accessible

【解决方案1】：

您可以使用text-indent 和overflow: hidden。

这个方法不灵活，但希望你能用。

.image {
  width: 200px;
  height: 100px;
  display: block; /* it needs for inline elements like span */
  background: url(http://cdn.osxdaily.com/wp-content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png);
  overflow: hidden;
  text-indent: -9999px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="image js-image">
  Image alt
</div>

<button class="js-button">On/Off styles</button>

<script>
  $('.js-button').click(function() {
    $('.js-image').toggleClass('image');
  });
</script>

【讨论】：

感谢 Philip 的回复，所以您说除了 text-indent 属性，我们还需要 jquery 来支持它。
@balaji 我为演示按钮添加了 jQuery
嗨，我尝试了 text-indent 和 overflow:hidden，如果我使用它们，我无法看到图像或文本，似乎我做错了什么，检查一下跨度>
@balaji 您需要在样式中指定跨度大小
我已经编辑了有问题的代码，不知何故无法看到上面提到的 css 的图像或文本

【解决方案2】：

@balaji，这已经是一个处理页面中 CSS 的 SO 线程，您可以从这里挑选一些内容并根据您的需要进行微调：How to determine if CSS has been loaded?

【讨论】：

您好，我已经按照 Philip 的建议进行了操作，并且成功了，感谢您的帮助 :)