1

我正在尝试通过如下 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);

它不起作用...

4

7 回答 7

3

url 应该始终与您的网站或 http(s) 地址相关，而不是本地路径。

于 2013-03-19T09:17:44.520 回答
0

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

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

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

于 2013-03-19T09:25:49.183 回答
0

感谢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/....... 也应该有效。令人惊讶的是，它没有。

于 2013-03-19T10:45:27.967 回答
0

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

于 2013-03-19T10:12:50.097 回答
0

您可以使用背景： url("Images1/small-heading.gif");

于 2013-03-19T10:15:26.513 回答
0

代替

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

利用

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

  1. 您的图片应带有 .gif 扩展名
  2. 将此代码放在 test.html 文件中，并将其放在文件夹名称中root
  3. 里面root的文件夹 创建一个文件夹Images1
  4. 将small-heading.gif图像放在此Images1文件夹中。
  5. 用任何浏览器打开 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>
于 2013-03-19T09:51:58.740 回答
0

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

于 2013-11-15T05:22:54.433 回答