IE中不显示背景图片答案

【问题标题】：Background image is not showing in IEIE中不显示背景图片
【发布时间】：2019-08-11 22:02:46
【问题描述】：

背景图片未在 IE 中显示。而它在 Chrome 中的显示效果很好。

这是 CSS：

.banner1 {
  background-image: url(/assets/images/banner-1.jpg)!important;
  height: 100%;

  display: block;
}

.banner2 {
  background-image: url(/assets/images/banner-2.jpg);
  height: 100%;

  display: block;
}

.banner3 {
  background-image: url(/assets/images/banner-3.jpg)!important;
  height: 100%;

  display: block;
}

.banner4 {
  background-image: url(/assets/images/banner-4.jpg)!important;
  height: 100%;

  display: block;
}

html:

     <div class="right_bx">


<span class="banner1"></span>

      </div>
 <div class="right_bx">
          <span class="banner2"> </span>
      </div>
 <div class="right_bx">
          <span class="banner3"></span>
      </div>
 <div class="right_bx">
          <span class="banner4"></span>
      </div>

当我刷新页面时，我看到出现了横幅 1 图像。第一个 div 中的图像出现在 IE 中。例如，如果我在第一个 div 中给出横幅 2，我可以看到横幅 2 图像。但是后续的 div 图片没有显示在 IE 中

【问题讨论】：

你用的是什么版本的IE？

标签： html css angular internet-explorer browser

【解决方案1】：

不确定这是否可行，但试试这个

.banner1 {
  background-image: "assets/images/banner-1.jpg"!important;
  height: 100%;

  display: block;
}

.banner2 {
  background-image: "assets/images/banner-2.jpg";
  height: 100%;

  display: block;
}

.banner3 {
  background-image: "assets/images/banner-3.jpg"!important;
  height: 100%;

  display: block;
}

.banner4 {
  background-image: "assets/images/banner-4.jpg"!important;
  height: 100%;

  display: block;
}

【讨论】：

我试过 Paul 但没有运气。在这里，我的问题是我放在第一个 div 中的任何一个都可以正常工作。但随后的 div 不起作用。
抱歉真的是我唯一能想到的，有些浏览器的文件路径很有趣。我看不出代码有问题您使用的是最新版本的 Internet Explorer 吗？甚至可以尝试在 Microsoft Edge 上运行它？
Edge 工作正常。我正在使用 IE11。不管怎样，谢谢保罗
没问题，抱歉帮不上忙

【解决方案2】：

使用background: url("..."); 或 background-image: url("..."); 也不要在文件路径的开头使用/。

将/assets/images/banner-1.jpg 更改为：assets/images/banner-1.jpg 等。

.banner1 {
  background: url("assets/images/banner-1.jpg");
  height: 100%;

  display: block;
}

.banner2 {
  background: url("assets/images/banner-2.jpg");
  height: 100%;

  display: block;
}

.banner3 {
  background: url("assets/images/banner-3.jpg");
  height: 100%;

  display: block;
}

.banner4 {
  background: url("assets/images/banner-4.jpg");
  height: 100%;

  display: block;
}

【讨论】：

【解决方案3】：

尝试使用F12开发者工具检查相关元素（图片加载成功与否，CSS样式）。我想问题可能与 div 容器为空有关，因此图像不显示。您可以尝试将内容填充到 div 中，或参考以下代码设置固定高度属性：

.right_bx{
    height: 200px;
}

【讨论】：