IE中没有显示背景图片

Question

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图像出现。 fisrt div中的图像在IE中出现。例如，如果我在第一个div中给出横幅2，我可以看到横幅2图像。 但随后的div图像并没有出现在IE中

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

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

Answer 3

尝试使用F12开发人员工具检查相关元素（图像加载是否成功，以及CSS样式）。 我想也许问题是div容器是空的，所以图像不显示。 您可以尝试将内容填充到div，或参考以下代码来设置修复高度属性：

.right_bx{
    height: 200px;
}