标题的背景图像不起作用

时间：2013-10-14 15:32:28

标签： asp.net css 

<body>
    <form id="form1" runat="server">
    <div class="page">
        <div class="header">
        ....
        </div>
        <div class="main"></div>
....
</form>
</body>

和css文件：

body   
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

.page
{
    width: 960px;
    background-color: #fff;
    margin: 0px auto 0px auto;
    border: 1px solid #496077;
    border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border: 2px solid white;padding: 1px 0;
    box-shadow: 5px 3px 5px #ccc;
    height: auto;
    overflow: hidden;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background-color: white; 
    background-image: url(~/img/056.JPG);// I want it displays as a image logo
    width: 100%;
    height:200px;

}

我已经尝试了许多方法为标题设置图像（徽标），即使我放了一行：  background-image: url(~/img/056.JPG);但056.JPG图片未出现在标题中（只是背景颜色）。

然后我这样做：

<div class="header">
            <img style="border:0px" src="img/056.JPG" height="200px" width="100%" alt=""/>
</div>

图像出现了，但这不是我想要的方式。因为，当我按照上面的方式设置标题的图像徽标时，我在<div> - ＆gt;中添加了一些新标记<div header>。 new <div>将显示在标题下方（我希望它显示在标题内）。

帮助，我的标题div中是否有任何错误，为什么背景图像不显示???

更新：

根据建议，我刚编辑了网址，我使用的是Banner2009_new.jpg而不是056.JPG：

background-image: url("/website/pic/Banner2009_new.jpg");

然后，我双击路径图像来检查： enter image description here

在Banner2009_new.jpg文件夹网页中仍然有文件：pic，但是当我查看时，似乎没有Banner2009_new.jpg

这是我的网站文件夹：enter image description here

enter image description here

2 个答案:

答案 0 :(得分：0)

相对于您网站根目录的background-image网址如下所示

url("/img/056.JPG")

（No tilda ~）

编辑：根据您的意见，对于您的本地开发托管环境，您的Web根文件夹是“网站”的父文件夹。你需要提供网址

url("/website/img/056.JPG")

如果您希望站点的根目录为父文件夹“website”，则可以将所有网站文件夹内容移动到父文件夹，或者在Web服务器上配置虚拟主机以指向“网站” “给定您指定的域名的文件夹（可能在hosts文件中）（但这是另一个主题）。 This may帮助您指明正确的方向。

答案 1 :(得分：0)

如果要将图像用作背景，则需要在CSS中将其设置为background-image。将其添加为标题div中的<img>只是将其添加为内嵌图像。

你第一次就做对了，你只需要从URL中删除波浪号（~）：

background-image: url(/img/056.JPG);
相关问题
最新问题