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

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

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

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

如果未加载bg图像，则应显示此文本
.iHaveBgImage{背景图像：url（'img.png'）}

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

编辑：

---

我被告知这一点以前已经得到了回答，但还有另一种情况。我没说可以改变DOM，只应用CSS和JS。第二，在另一个解决方案中，我建议我应该使用title属性，我尝试了它，但它不显示文本，只将其悬停。

解决方法之一是更改

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

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

如果未加载bg图像，则应显示此文本
.iHaveBgImage{背景图像：url（'img.png'）}

致：

或者，我不确定以下方法是否有效，但您可以按照以下方法做一些事情：

<img class="iHaveBgImage" alt="Seems like this image failed to load" />

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

.iHaveBgImage{背景图像：url（'img.png'）}

编辑：我脑海中突然出现的一些可能也会起作用的东西是：

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

.iHaveBgImage { 
background-image: url('img.png') 
}
.bgText {
  z-index: -9999;
}

如果未加载bg图像，则应显示此文本
.iHaveBgImage{
背景图像：url（'img.png'）
}
.bgText{
z指数：-9999；
}

试试这个

P.hidden{
可见性：隐藏；
}
.iHaveBgImage{
背景图像：url（'https://s31.postimg.org/yqv51r5xn/6936671_hd_wallpapers_for_ipad.jpg');
颜色：红色；
宽度：700px；
高度：300px；
}

这是我在中的建议：


.iHaveBgImage{
宽度：500px；
高度：200px；
背景图像：url（'http://www.menucool.com/slider/jsImgSlider/images/image-slider-5.jpg');
}

试着这样做：

HTML

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

工作正常
如果无法加载图像，如何显示范围？更新我的答案，查看此信息即使在加载图像时也会显示。什么意思（加载图像时）不清除问题在解决方案中，文本和图像都可见。仅当图像未加载或不存在时，文本才应可见。不，它不是重复的。我没说可以改变DOM，只应用CSS和JS。第二，在该解决方案中，建议使用title属性，我尝试了它，但它不显示文本，只悬停。好的，检查我的答案，我建议使用span。如果不更改DOM（仅CSS和JS），第一个解决方案将无法工作。后者不起作用，因为我不使用绝对位置，我也不想使用绝对位置，因为所有的位置都应该对齐。好吧！很公平。尽管如此，如果您想要一个函数，您必须准备好最终牺牲另一个函数（或者至少重新执行以前的函数）。我猜你已经知道了这一点，但想把它说出来：）我尝试了第一个带有title属性的解决方案，但是回退文本不显示，只显示工具提示。至于第二个解决方案，如果图像小于回退文本会怎么样？@Dalibor很明显，如果图像较小，就会看到文本。使用js隐藏和显示文本onerror。如果图像有错误，您的解决方案将不起作用transparency@ManuelFerreiro此解决方案是直接针对OP给出的，OP的问题不包括不透明度或透明度。@ManuelFerreiro如果您需要使用不透明度的图像，考虑使用标签，然后使用OnCurror事件在图像不加载时显示文本。
<div class="iHaveBgImage">
  <p>this text should be displayed if bg image is not loaded</p>
</div>

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

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