html - 为 css 图像获取 alt 的解决方法

Question

我开始知道我们不能为 css 生成的图像设置 alt。有一些解决方案说通过具有 title 属性 我们只能在悬停 在图像上，但是当我们禁用 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>