откат для цвета текста кнопки, если фоновое изображение не загружено?

Question

У меня есть кнопка с файлом PNG с темным фоном с прозрачными пленками. текст кнопки белый. если фоновое изображение не отображается, мне нужна резервная копия, чтобы изменить цвет текста кнопки на черный. как это можно сделать с помощью javascript? Я нашел CSS transparent background fallback when images are disabled, но это, похоже, не работает здесь, также я не уверен, как правильно ввести div в html-код.

.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() ссылки в CSS не повышают успех/события ошибок, так что единственный способ проверить, если загружен образ или нет на самом деле попробуйте загрузить его с помощью 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   
});