如何设置具有两个备选图像的背景图像?(当没有图像时设置替代图像)

Question

我想设置背景图像。有两个可供选择的图像。这是我的密码。

<a id="test" style="bakckground: url('image1.png'), bakckground: url('image2.png');">test</a>

我想检查第一个图像(image1.png(，如果没有图像，我想设置第二个图像(image_2.png(。如果有第一个图像，则设置第一个图像。

如果我放上面的代码，当两个图像都存在时，它会将两个图像设置在一个标签上。。。

我想检查第一个图像，如果它存在，我只想设置第一个图像。如果有第二个图像，只设置第二个。

请给我一个解决这个问题的建议。。

若并没有答案，是否有机会在jQuery事件上捕获？我试图用下面的代码捕捉错误，但没能捕捉到错误。。

$("[id='test']").error(function() {
alert( "Handler for .error() called." )
});

Answer 1

background可以设置多个背景。

background:url("bg1.jpg") 0 0 no-repeat,
url("bg2.jpg") 200px 0 no-repeat

bg1层位于bg2之上，如果bg1不存在，则隐藏。bg2自动显示

尝试更改可以使用的图像链接

.bg-wrap {
width: 100px;
height: 100px;  /* Try deleting the bg1 background url */
background: url("https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=248222817,375547763&fm=26&gp=0.jpg") 0 0 no-repeat,
url("https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2901784552,1261367458&fm=26&gp=0.jpg") 0 0 no-repeat
}

<div class="bg-wrap"></div>

Answer 2

只添加一个伪元素"before"，并将维度设置为与其父元素类似。请参阅下面的代码。我不知道这是否是你想要的，但希望这能帮助你。

#test {
color: green;
background: url(https://dummyimagee.com/100x100/000/fff); /* wrong path */
/* background: url(https://dummyimage.com/100x100/000/fff); */ /* correct path */
width: 100px;
height: 100px;
display: inline-block;
position: relative;
}
#test::before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(https://dummyimage.com/100x100/ff0000/0011ff);
z-index: -1;
}

<a id="test">test</a>