バックグラウンドイメージがロードされていない場合、ボタンのテキストカラーのフォールバック？

Question

私は、OHPフィルムの暗い背景画像pngファイルのボタンを持っています。ボタンのテキストは白です。背景画像が表示されない場合は、ボタンのテキストの色を黒に変更するためのフォールバックが必要です。どのようにこれはjavascriptで行うことができますか？ 私はCSS transparent background fallback when images are disabledを見つけましたが、ここではうまくいかないようです。また、HTMLコードに正しくdivを入力する方法もわかりません。 CSSの

.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

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   
}); 

を使用して、それをロードしようとすることで、成功/エラーイベントを発生させません。