background-image无法在任何浏览器上运行

Question

我正在努力将背景图片放在我的页眉和页脚上。当我点击VS上的设计选项卡时，它似乎正在工作，但是当我执行Web应用程序时，背景图像将不会显示。

我的样式表

#Header {
    height: 150px;
    width:1020px;
    background-color:gray;
    background-image:url('images\bg-image.png');
    background-position-x:right;
    font-size:30px;
    font-family:Arial;
}

#Footer {
    background-color:gray;
    background-image:url("e:\...\images\footer-image.png");
    width:1020px;
    height:80px;
    text-align:center;
    font-family:Arial;
    font-size:13px;
    margin-top:5px;
}

正如您将注意到的，我已尝试更改图像的路径，但它仍然给我相同的结果。

我的VS图像目录

执行时的结果（我已尝试使用IE，Chrome，FF）

我希望有人会帮助我。谢谢！

Answer 1

这几乎肯定是一个路径问题。尝试使用Web根目录的完整路径：

/* Assuming the images directory is in the web root.*/
background-image:url('/images/bg-image.png');

Answer 2

请勿使用url("e:\...\images\footer-image.png")。

相反，您可以尝试file计划：

url("file:///e:/.../images/footer-image.png")

但是，如果使用file方案访问网页，则只能使用它。在您的屏幕截图中，您使用的是http，因此出于安全考虑，它无法正常工作。

然后，最佳选项可以是相对网址，这对于http和file都有效：

url('images/bg-image.png');

请注意使用斜杠/而不是向后\。

Answer 3

路径名问题。在这里输入代码所以：

#Header {
height: 150px;
width:1020px;
background-color:gray;
background-image:url('images/bg-image.png');
background-position-x:right;
font-size:30px;
font-family:Arial;
}

#Footer {
background-color:gray;
background-image:url("e:/.../images/footer-image.png");
width:1020px;
height:80px;
text-align:center;
font-family:Arial;
font-size:13px;
margin-top:5px;
}