今天写网页的时候遇到一个问题,在样式表里面引用background-image,没有出现效果。然后查了一下是因为相对路径和绝对路径的问题,还有一个是对css样式表的引入的误解,这类文章别的博客已经有的说的比较清楚了。我现在也想按我的思路记录下来对我来说更有可读性。
在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文件的路径。
所以要解决的话有三种方法:
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.(这种方式我没有试过,理论上是可以的。)
下面总结一下相对路径和绝对路径的写法:(抄自百度知道)
相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。
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。对应于我的文件夹是一样的。
好啦,以后要是忘了怎么写得相对路径就再来看看就行。