CSS 或 Javascript - 如果未加载背景图像，则显示后备文本 [重复]答案

【问题标题】：CSS or Javascript - display fallback text if background image not loaded [duplicate]CSS 或 Javascript - 如果未加载背景图像，则显示后备文本 [重复]
【发布时间】：2016-10-21 09:47:20
【问题描述】：

如果徽标图形文件未加载或丢失，如何显示文本而不是徽标？我有带有背景 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。其次，在其他解决方案中，我应该使用 title 属性，我试过了，它不显示文本，只悬停它。

【问题讨论】：

不，它不是重复的。我没有说可以改变 DOM，只能应用 CSS 和 JS。其次，在该解决方案中建议使用标题属性，我尝试了它，它不显示文本，只悬停它。
好的，检查我的答案我建议使用 span 的替代方法。

标签： javascript css background-image onerror

【解决方案1】：

一种解决方法是改变

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

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

收件人：

<img src="img.png" alt="Seems like this image failed to load" />

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

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

.iHaveBgImage { background-image: 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;
}

【讨论】：

如果不更改 DOM（仅 CSS 和 JS），第一个解决方案将无法工作。后者不起作用，因为我不使用绝对位置，而且我不想这样做，因为一切都按应有的方式对齐。
好的！很公平。尽管如此，如果你想要一个功能，你必须准备好最终牺牲另一个（或至少，重新做之前的一个）。我猜你已经知道了，但想把它拿出来:)

【解决方案2】：

试试这个

P.hidden {
    visibility: hidden;
}
.iHaveBgImage {
  background-image: url('https://s31.postimg.org/yqv51r5xn/6936671_hd_wallpapers_for_ipad.jpg');
  color: red;
width:700px;
  height:300px;
}

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

如果您想使用对文本可见的文本，请使用 <span></span> 标签并创建 css span {display: block;} 或

html

 <p class="hidden> This text should be displayed if bg image is not loaded</p>

CSS

P.hidden {
    visibility: hidden;
}

【讨论】：

如果无法加载图片，如何让span可见？
更新了我的答案，看看这个
即使在加载图像时也会显示。
你是什么意思（当图片加载时）不明白你的问题
在您的解决方案中，文本和图像都是可见的。仅当图像未加载或不存在时，文本才应可见。

【解决方案3】：

这是我在duplicate tag中建议的：

.iHaveBgImage{
  width:500px;
  height:200px;
  background-image: url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-5.jpg');
  }

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

使用 span 标签的替代方法：

span.image:before{
  content:" "; background:url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-5.jpg');
  display: block;
  position:absolute;
  width:500px;
  height:200px;
}

  &lt;span class="image"&gt;alternate text&lt;/span&gt;

【讨论】：

我尝试了第一个带有标题属性的解决方案，但没有显示后备文本，只有工具提示。
至于第二种解决方案，如果图像小于后备文本会发生什么？
@Dalibor 很明显，如果图像较小，则可以看到文本。使用js隐藏和显示文本onerror。

【解决方案4】：

试试这个方法：

HTML

<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/

【讨论】：

如果图像具有透明度，您的解决方案将不起作用
@ManuelFerreiro 此解决方案是直接响应 OP 的问题，其问题不包括不透明度或透明度。
@ManuelFerreiro 如果您需要使用不透明的图像，请考虑使用标签，然后在图像未加载时使用 onerror 事件显示文本。