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

Question

我通过 css property 加载图像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

如果图像没有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:after收到的 css（部分）的完成。}

要在图像加载后显示 ，alt您可以先加载（使用 javascript）图像，然后将其放入图像中并显示alt. （基于这个答案）

$('[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">