Question

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

＆＃13;

.btn-was {  
  background-size: 100%;
  background-repeat: no-repeat;
  color:#fff;
  margin-bottom:25px;
  padding:10px;
}

.btn-was {
  background-image: url(../img/button.png);
}

＆＃13;

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

＆＃13;

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

如果未加载背景图片，则为按钮文字颜色后备？

1 个答案: