没有加载背景图像的备用背景答案

【问题标题】：Have an alternate background if the background image doesnt load没有加载背景图像的备用背景
【发布时间】：2016-08-04 05:00:16
【问题描述】：

我目前有一个涵盖某些屏幕分辨率的图像，但如果屏幕分辨率大于图像，则每个像素越大，它就会是白色，所以我想要那个背景图像后面的颜色而不是丑陋的白色所以它不会看起来难看。我当前的代码只是背景的img标签，css将其缩放到100%，但如果屏幕分辨率大于图像分辨率，就会产生问题。

【问题讨论】：

jQuery/Javascript to replace broken images的可能重复
您需要为此使用 javascript。

标签： html css

【解决方案1】：

您使用 img 标签作为背景图片，而不是设置 div 以使其背景作为该图片，是否有特定的原因？因为你可以很容易地用 css 做到这一点。

.background-div {
  width: 100%;
  height: 100%;
  background: url(your_image_url) no-repeat;
  background-size: cover;
  background-color: #e3e3e3;
}

.background-div 将在哪里代替您的 img... 这也可能是文档的 body 或其他。它只是一个覆盖整个背景的容器 div。

然后背景具有#e3e3e3 的后备颜色，background-size: cover 表示它将始终缩放图像以填满屏幕，因此您不会看到该颜色。您也可以改用contain，这将使图像按您的预期缩放，并显示图像未达到的背景颜色。

【讨论】：

感谢对我有用，我将非工作后备设置为“背景：绿色；”但显然它是“背景颜色：绿色；”可以的，谢谢你的帮助。

【解决方案2】：

找到图像的父 div 并添加样式表属性。

它看起来像这样

<div class="parent" style="background-color: #000000;height: 100%;width: 100%;">
<img src="your image url" class="image" alt="alt" title="your title"/>
</div>

属性样式="背景颜色：#000000;"会给 div 一个黑色的背景颜色。

您还可以通过 style.css 文件中的类名设置背景颜色。或者你给文件起什么名字。

.parent {
     background: #000;
     height: 100%;
     width: 100%;
}

.parent img {
     max-width: 100%;
}

我希望这是您正在寻找的遮阳篷。如果没有，请提供更多详细信息。也许显示您当前代码的结构。

【讨论】：