在css样式表里面引用background-image没有出现图片原因与解决方法

今天写网页的时候遇到一个问题，在样式表里面引用background-image，没有出现效果。然后查了一下是因为相对路径和绝对路径的问题，还有一个是对css样式表的引入的误解，这类文章别的博客已经有的说的比较清楚了。我现在也想按我的思路记录下来对我来说更有可读性。

1. 在css样式表background-image：url()；失效的原因

   比如最简单的，我建了一个文件夹名为：螺丝定制（最好是英文命名好）,例如：

   <link type="text/css" rel="stylesheet" href="css/1.css"/>

   在imge文件夹下面有一张照片为background.png.然后我想在1.css里面写样式的时候引入一个background-image:url（）；例如这样：
   background-image: url("image/background.png")。

   效果是不显示的，这个错误源于对外部CSS文件的一个误解。我一直以为，当在html中引用外部样式表后，那么在样式表文件中定义的样式就相当于在html头文件中定义的样式了。但事实证明并非如此，它依然存放在定义的文件中被一起下载到客户端。这一点从background-image的url属性定义的实践上也可以清楚地看出，在定义url时，如果是绝对地址当然没什么问题，如果是相对地址，那么，一定要相对css/1.css所在的路径，而不必考虑即将引用它的html文件的路径。

2. 所以要解决的话有三种方法：

   1.用相对路径。那就这样：在html的头部写样式，就可以相对于html文件的图片的路径了。

   <style>
   

   .ad{
   background-image: url(“image/background.png”);
   /background:#eb4f38;/

   font-size: 20px;
   

   font-weight: bold;
   color: white;
   height: 57px;
   width:400px;
   }
   
   2.用相对于1.css文件路径，那就要相对于1.css文件的背景图片路径，对于html文件来说，该图片的引入与它无关啦。像这样写： .ad{ background-image: url("../image/background.png") }

   3.用绝对路径：比如f:/河源/螺丝定制/image/background.png.(这种方式我没有试过，理论上是可以的。)

3. 下面总结一下相对路径和绝对路径的写法：（抄自百度知道）

相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。 

1 两个文件在同一个文件夹下，直接写文件名即可 
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html 
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\index.html 
在info.html加入index.html超链接的href应该这样写：index.html 

2 要引用的文件在下一级文件夹下，文件名前加子文件夹名称 
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html 
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html 
在info.html加入index.html超链接的href应该这样写：html/tutorials/index.html 

3 要引用的文件在上一级文件夹下，文件名前加../ 
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html 
假设index.html路径是：c:\Inetpub\wwwroot\sites\index.html 
在info.html加入index.html超链接的代码应该这样写：<a href="../index.html">index.html</a> 

举一反三：  ../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。 

4 更复杂的情况： 
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html 
假设index.html路径是：c:\Inetpub\wwwroot\sites\html\index.html 
在info.html加入index.html超链接的代码应该这样写：<a href="../html/index.html">index.html</a> 
 我这次的文件夹适合第四种情况。我理解为，先回到它们共同的父文件下site下再找html文件夹下面的index.html。对应于我的文件夹是一样的。
 好啦，以后要是忘了怎么写得相对路径就再来看看就行。