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。其次，在其他解决方案被消化时，我应该使用title属性，我尝试了它并且它不显示文本，只是将其悬停。

Answer 1

这是我在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;
}

  <span class="image">alternate text</span>

Answer 2

以这种方式尝试：

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

Answer 3

对此的一种解决方法是更改

<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;
}

Answer 4

试试这个

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;
}

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

4 个答案: