说说background-image属性图片的相对路径

background-image属性主要用来设置或检索对象的背景图像，其值有none和url，none表示无背景图像，url为背景图像的地址，url可以用相对地值或绝对地址，例如：

.bg {background-image: url(images/new_8.gif);}
.bg {background-image: url(http://www.mzwu.com/images/new_8.gif);}

在实际操作过程中，我们发现：当使用相对地址时，相对地址和css是内联还是外联是有关系的，这个问题在使用绝对地址时不存在。下边我们做些简单的测试来说明它们是有关系的，最终总结下它们有什么样的关系，测试页面结构为：

index.htm
images/new_8.gif
style/css.css

当使用内联方式时，用background-image设置index.htm中的对象的背景图像代码为：

<style type="text/css">
<!--
.bg {background-image: url(images/new_8.gif);}
-->
</style>

现在我们把.bg {background-image: url(images/new_8.gif);}移到css.css文件中，改用外联的方式调用：

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

结果背景图像显示不出来！我们对css.css中的图片相对地址做些修改：

.bg {background-image: url(../images/new_8.gif);}

背景图显示出来了！再测试一次，我们把css.css内容还原为.bg {background-image: url(images/new_8.gif);}并移到images文件夹下，修改外联css地址再做测试：

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

背景图又显示不出来！我们再对css.css中的图片相对地址做些修改：

.bg {background-image: url(new_8.gif);}

又正常显示出背景图了！

有兴趣的朋友可以再多做几次测试，从测试中我们可以得出结论：url相对地址应是背景图像相对于css所在文件的地址！当使用内联css时，相对地址为图像相对于htm文件的地址；当使用外联css时，相对地址应为图像相对于css文件的地址！

评论（0）