如果使用 css 加载图像，如何防止显示图像替代文本

Question

我正在通过 css background 属性加载图像，而不是使用 src 属性。但在这种情况下，alt 文本也会出现。如何停止显示 alt 文本并仅在未加载图像时显示它

.test {
  display: block;
  width: 200px;
  height: 82px;
  background-size: 200px 82px;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJr81CRJeZGFiBsA9_AOyyxegiIPctdcbNfHThnpnclmFH-mJwoQ");
}

<img class="test" alt="My background image">

Answer 1

首先我需要知道，将背景图片设置为<img>标签有什么目的吗？ 如果是，则在此处使用<img> 标签用户<div> 或任何其他标签而不是使用<img> 是没有意义的。 根据 W3C 标准标记应包含 alt="some text"，如果未找到 <img> 源。

Answer 2

如果图像没有src 属性（或为空），您可以做一个小技巧并隐藏图像内的“文本”。

（你可以通过多种方式隐藏文字我选择一种）

.test {
  display: block;
  width: 200px;
  height: 82px;
  background-size: 200px 82px;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJr81CRJeZGFiBsA9_AOyyxegiIPctdcbNfHThnpnclmFH-mJwoQ");
}

img:not([src]) {
  font-size: 0;
  position: relative;
}

img:not([src]):after {
  font-size: 18px;
  border: 1px solid black;
  box-sizing: border-box;
  content: attr(alt);
  z-index: -1;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0
}

<img class="test" alt="My background image">

_{从@Ihazkode 收到的 css（:after 部分）的完成。}

为了在图像加载后显示alt，您可以先加载（使用javascript）图像，然后将其放入图像中并显示alt。 （基于this的回答）

$('[data-image]').each(function() {
  var $this = $(this);
  var alt = $this.attr('alt');
  var src = $(this).attr('data-image');
  $this.removeAttr('alt');
  
  $('<img/>').attr('src', src).on('load', function() {
    $(this).remove();
    // simulate the delay for heavy image
    setTimeout(function(){
      $this.css('background', 'url(' + src + ')').attr('alt', alt);
    }, 1000);
  }).on('error', function() {
    $this.attr('alt', alt);
  });
});

.test {
  display: block;
  width: 200px;
  height: 82px;
  background-size: 200px 82px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="test" alt="My background image" data-image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJr81CRJeZGFiBsA9_AOyyxegiIPctdcbNfHThnpnclmFH-mJwoQ">