Фоновое изображение не отображается в IE - PullRequest
Новая
       19

Фоновое изображение не отображается в IE

0 голосов
/ 21 марта 2019

Фоновое изображение не отображается в 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. Например, если я даю баннер 2 в первом div, я вижу изображение баннера 2.Но последующие изображения Div не отображаются в IE

Ответы [ 3 ]

0 голосов
/ 21 марта 2019

используйте 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;
}
0 голосов
/ 22 марта 2019

Попробуйте использовать инструменты разработчика F12 для проверки связанных элементов (независимо от того, была ли загрузка изображения успешной или нет, а также стиля CSS).Я предполагаю, что, возможно, проблема связана с тем, что контейнер div пуст, поэтому изображение не отображается.Вы можете попробовать заполнить содержимое div или обратиться к следующему коду, чтобы установить свойство fix height: 

.right_bx{
    height: 200px;
}
0 голосов
/ 21 марта 2019

Не уверен, что это будет работать, но попробуйте это 

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