html - 使用背景 : url() 的 onerror 事件

Question

如果找不到源图像，是否有办法显示备用图像？我知道要完成此操作，请执行以下操作:

<img src="imagenotfound.gif" alt="Image not found" onError="this.src='imagefound.gif';" />

但是如果你正在做这样的事情，如果有错误或者找不到图像，你怎么能捕捉到呢？

<div style="background:url('myimage.gif')"></div>

Answer 1

万一myimage.gif不透明，您可以使用多个背景:

background: url('myimage.gif'), url('fallback.gif');

这边fallback.gif仅在 myimage.gif 时可见不可用。

请注意 fallback.gif即使 myimage.gif 也可以下载可用。

---

或者，即使没有得到广泛支持，CSS 图像 3 也引入了 the image() notation :

background: image('myimage.gif', 'fallback.gif');

Multiple <image-decl>s can be given separated by commas, in which case the function represents the first image that's not an invalid image.