标题: 说说background-image属性图片的相对路径
作者: dnawo
日期: 2008-06-25 11:01 AM
分类: HTML/CSS
内容: 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)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.598 ms
标题: 说说background-image属性图片的相对路径
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.598 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.613 ms