为CSS图像获取Alt的解决方法

Question

我知道我们不能为css生成的图像设置alt。有解决方案说，通过拥有标题属性，我们可以得到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>

谢谢,巴拉吉。

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线程了，你可以从这里选择一些东西并根据你的需要进行微调:如何确定CSS是否已加载?