Question

我正在尝试通过CSS在html标签的背景中应用图像，如下所示。任何人都可以告诉我为什么这个图像在运行时不可见？我可以在设计时看到它。另外，为什么我必须给出完整的路径？如果我只写图像名称，则不可见。

.small-heading 
    {
   background:url(C:\Users\Admin\Documents\Visual Studio 2010\Projects\WebApplication1 \WebApplication1\Images1\small-heading.gif);
   width: 105px;
    height: 20px;
  float: left;
 font-size: 0.9em;
line-height: 18px;
font-weight: normal;
color: #7a7a7a;
overflow: hidden;
padding: 0 0 0 3px;
}
<strong class="small-heading">
 <a href="#" id="lnkPassword" >Change Password</a></strong>
 </td>

我的图片位于名为Image1的文件夹中，该文件夹直接位于根目录中。我试过用这个：

background:url(Images1\small-heading.gif);

它不起作用......

Answer 1

网址应始终相对于您的网站或http（s）地址，而不是本地路径。

Answer 2

你应该把相对路径。
在应用程序根文件夹中创建一个Image文件夹将图像放在那里（因为你们都准备好了Images1）
并像这样使用

background:url(Images1\small-heading.gif);

处理文件路径。放置css-class的css文件应该位于根文件夹中其他明智的改变

Answer 3

而不是

background:url(Images1\small-heading.gif);

使用

background:url('Images1/small-heading.gif');

您的图片应为.gif扩展名
将此代码放入test.html文件中，并将其放在文件夹名root
在root文件夹中创建文件夹Images1
将small-heading.gif图片放在此Images1文件夹中。
通过任何浏览器打开test.html并检查。

完整代码

<html>
    <head>        
<style type="text/css">
.small-heading{
    background:url('Images1/small-heading.gif');
    width: 105px;
    height: 20px;
    float: left;
    font-size: 0.9em;
    line-height: 18px;
    font-weight: normal;
    color: #7a7a7a;
    overflow: hidden;
    padding: 0 0 0 3px;
}
.small-heading a{
    color:white;
    width: 105px;
    height: 20px;
    display:block;
}

</style>
    </head>
<body>
<strong class="small-heading">
<a href="#" id="lnkPassword" >Change Password</a>
</strong>
</body>
</html>

Answer 4

尝试一件事 - 在浏览器中打开该图像并从浏览器复制路径，而不是整个路径，如果您的图像在图像文件夹中，只从该文件夹中获取路径并尝试该路径。

Answer 5

你可以使用 background：url（“Images1 / small-heading.gif”）;

Answer 6

感谢every1惹麻烦。这最终对我有用：

.small-heading 
{
background-image:url('../../Images1/small-heading.gif');
width: 105px;
height: 20px;
float: left;
font-size: 0.9em;
line-height: 18px;
font-weight: normal;
color: #7a7a7a;
overflow: hidden;
padding: 0 0 0 3px;
}

但是，如果这个（../../）有效，〜/ Images1 / .......也应该有效。令人惊讶的是，它没有。

Answer 7

你可以使用“./Images/logo.jpg”它会正常工作

图像在运行时不可见

7 个答案: