2013-03-19 65 views
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); 

它不工作...

+0

Change Password adityawho 2013-03-19 09:18:44

+0

尝试创建hiearchy,把你的图像文件夹的根目录后,你可以给一个路径的图像/小标题。 gif和obviosly它会工作 – 2013-03-19 09:22:20

+0

它已经在根目录 – adityawho 2013-03-19 09:26:45

回答

3

URL应该永远是相对于你的网站或HTTP(S)地址,而不是本地路径。

+0

那么我在那里放什么?我只是在做一个任务,它不是一个网站,将要上线 – adityawho 2013-03-19 09:21:26

+0

您可以将图像移动到html的子文件夹中页面和引用它使用的背景:url('images/Image.gif') – 2013-03-19 09:25:42

+0

我编辑了我原来的帖子,你明白我的意思吗?它必须是与CSS的东西 – adityawho 2013-03-19 09:33:10

0

你应该把相对路径。
在应用程序根文件夹中创建一个Image文件夹。
将您的图像那里(因为你都准备好的Images1)
而使用这样

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

小心文件路径。你放置css-class的css文件应该位于根文件夹中。
其他明智的变化相应

0

而不是

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

使用

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

  1. 你的图片应该与.gif扩展
  2. 将此代码放在一个测试.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> 
+0

谢谢,但没有事情似乎正在工作......只有当我给出完整的本地路径时,图像才显示在背景中,否则不会。即使在这种情况下,它在运行应用程序时也不会显示。 – adityawho 2013-03-19 09:58:23

+0

检查eddied答案 – 2013-03-19 10:07:34

0

尝试一个东西─ 在浏览器中打开图像,复制从浏览器的路径,而不是整个路径,如果你的图片是图片文件夹中采取从路径只有该文件夹并尝试该路径。

0

您可以使用 background:url(“Images1/small-heading.gif”);

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/.......也应该工作。令人惊讶的是,事实并非如此。

0

您可以使用“./Images/logo。JPG”这将正常工作