背景图片显示在Firefox和Chrome中，但不是IE9 [英] Background Image shows in Firefox and Chrome but NOT IE9

问题描述

我有一个标题，在后台有一个图像，并没有在IE9中显示。它可以在Chrome，Firefox和Safari中正常工作。标题中打开的徽标文件显示正常。

HTML：

 < div class =myheader> 
< img src =img / logo.png>< h5 class =your-on>您现在位于：登入页面< / h5> 
< / div> 
  

CSS：

  .myheader {
 height：90px; 
 / *背景颜色：＃3D8F43; * / 
 padding：5px; 
职位：亲属; 
 border-radius：10px; 
 -moz-border-radius：10px; 
 background-image：url（../ img / header-bg.jpg）; 
} 
  

另外，我只需在本地打开这些文件，它与。这是一个演示，我需要发送电子邮件给不同的人，让他们打开它并查看HTML文件，因此我需要它在本地工作。

我已经启用混合内容在IE中的设置，但它没有工作。

更新 - 应该包括这第一。当我第一次打开页面时，IE声明它已经限制网页运行脚本或ActiveX控件。我允许它做到这一点，并刷新页面，但具有相同的结果，没有图像。

解决方案

我不知道为什么它是发生在你身上。所以我摆弄出来，这里是代码（和你的一样，只有图像是我从互联网上获得的图像）：

HTML：

 < div class =myheader> 
< img src =https://www.key.com/kco/images/logo.png/> 
< h5 class =your-on>你在：Login Page< / h5> 
< / div> 
  

CSS：

  .myheader {
 height：90px; 
 / *背景颜色：＃3D8F43; * / 
 padding：5px; 
职位：亲属; 
 border-radius：10px; 
 -moz-border-radius：10px; 
 background-image：url（https://www.key.com/kco/images/bg_nav-rht.png）; 
} 
  

截图如下：

徽标是包含 keybank 字符串的徽标，背景是其中包含红色和灰色的背景。

这是小提琴： http://jsfiddle.net/pLkbV/2/

我已经在IE 9和10上测试过它，它的工作完美无瑕。

所以，在你的情况下可能的原因可能是图片未从您在背景网址中提供的路径加载。

I have a header that has an image in the background and it is not showing up in IE9. It works fine in Chrome, Firefox, and Safari. The logo file that is opened in the header displays fine.

HTML:

<div class="myheader">
  <img src="img/logo.png"><h5 class="your-on">You are on: Login Page</h5>
</div>

CSS:

.myheader {
    height: 90px;
    /* background-color: #3D8F43; */
    padding: 5px;
    position: relative;
    border-radius: 10px;
    -moz-border-radius:10px;
    background-image: url("../img/header-bg.jpg");
}

Also, I am simply opening these files locally with whatever browser I want to open it with. It is a demo that I need to email different people and have them open it and view the HTML files so I need it to work locally.

I have already enabled mix content on the settings in IE but it didn't work.

Update - Should have included this first. When I first open the page IE states that it has restricted the webpage from running scripts or ActiveX controls. I allow it to do this and refresh the page but with the same result, no image.

解决方案

I am not sure why it's happening to you. So i fiddled it out and here's the code(It's the same as yours, only the images are some images that i got from internet) :

HTML :

<div class="myheader">
    <img src="https://www.key.com/kco/images/logo.png"/>
    <h5 class="your-on">You are on: Login Page</h5>
</div>

CSS:

.myheader {
    height: 90px;
    /* background-color: #3D8F43; */
    padding: 5px;
    position: relative;
    border-radius: 10px;
    -moz-border-radius:10px;
    background-image: url("https://www.key.com/kco/images/bg_nav-rht.png");
}

The screenshot looks like this :

The logo is the one containing the keybank string and the background is the one with red and grey color in it.

Here's the fiddle : http://jsfiddle.net/pLkbV/2/

I have tested it on IE 9 and 10 and it worked flawlessly.

So , a possible reason in your case might be that the image is not getting loaded from the path that you have provided in the background URL.

这篇关于背景图片显示在Firefox和Chrome中，但不是IE9的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！