CSS 或 Javascript - 如果背景图像未加载，则显示后备文本

Question

如果徽标图形文件未加载或丢失，如何显示文本而不是徽标？我有带有背景 PNG 图像的 div：

<div class="iHaveBgImage">
this text should be displayed if bg image is not loaded
</div>

.iHaveBgImage { background-image: url('img.png') }

它不必是纯 CSS，Javascript 解决方案是允许的。我正在考虑 onerror 事件，但它适用于图像，而不是具有图像背景的元素。

编辑：我被告知这已经被回答过，但还有另一种情况。我没有说可以改变DOM，只能应用CSS和JS。其次，在建议的其他解决方案中，我应该使用标题属性，我尝试了它，它不显示文本，只将其悬停。

Answer 1

试试这样：

超文本标记语言

<div class="iHaveBgImage">
  <p>this text should be displayed if bg image is not loaded</p>
</div>

CSS

.iHaveBgImage { background-image:
url('https://s31.postimg.org/yqv51r5xn/6936671_hd_wallpapers_for_ipad.jpg');
color:red;
}

.iHaveBgImage > p {
  position: relative;
  z-index: -1;
}

完美运行https://jsfiddle.net/s0gt2eng/