如果未加载背景图像，按钮文本颜色的后备？

Question

我有一个带有透明背景的深色背景图像 png 文件的按钮。按钮文本是白色的。如果背景图像没有显示，我需要一个后备来将按钮文本颜色更改为黑色。这怎么能用javascript来完成？ 我找到了CSS transparent background fallback when images are disabled，但这似乎在这里不起作用，我也不确定如何在 html 代码中正确输入 div。

.btn-was {  
  background-size: 100%;
  background-repeat: no-repeat;
  color:#fff;
  margin-bottom:25px;
  padding:10px;
}

.btn-was {
  background-image: url(../img/button.png);
}

<a class="btn-was" href="#" role="button">About</a>

Answer 1

css 中的 url() 引用不会引发成功/错误事件，因此测试图像是否加载的唯一方法是实际尝试使用 js 加载它

$(".btn-was").each(function() {
    //extract css `background-image` value of this anchor's css
    var bgimg = $(this).css("background-image").match(/url\(["']?([^()]*)["']?\)/).pop();  
    var image = new Image();                   // dummy img for testing
    $(image).error(function() {                // if img didn't load
        console.log(bgimg + " didn't load ");
    $(".btn-was").css('color','black');          // so assign fallback style
    });
    $(image).attr("src", bgimg);               // check if img loads        
});