为 css 图片获取 alt 的解决方法

Question

我开始知道我们不能为 css 生成一个 alt image.There 是通过具有 title 的解决方案attribute 我们只能在图像上悬停时获得 alt 效果，但是当我们禁用 css 时，我们将无法看到该文本代替image.In 我的情况 即使 css 被禁用 我也需要显示文本。当 [=26] =] 已禁用。

    <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>

谢谢，巴拉吉.

Answer 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>

Answer 2

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

为 css 图片获取 alt 的解决方法

workaround for getting alt for a css image

html

css

accessibility

attr-accessible