CSS—background: url(imagePath);使用小结

CSS之background: url();属性使用小结：

   作为前端初学者，总是会遇到这样哪样的疑惑。这不，这次在background属性时遇到了问题——即运用了background: url( imagePath );后不起作用。
   最后在百度上搜了下发现遇到同样问题的人还真不少，但是很多人的回答并没有说到点上去，所以经过自己的摸索后今天把我的“总结”贴出来供大家交流。

真正的问题在哪？

   在url(imagepath)里的这个imagepath，原来它是相对于.css文件这个目录，而不是调用css文件所在文件的这个目录，简单点说，就是假如我有个index.htm，它要调用index.htm所在的一个子目录style目录下的style.css文件，背景图片存放在与style目录同级的images目录下，于是乎，这里的CSS应该这样写：

background:url(../images/bg1.gif)no-repeat;

只有文字说明方式被我个人一直所摒弃的方式，下面通过图文结合的方式来解释这个问题：

   <1>若样式表文件与内容分离：则background：url(../imgages/tick.png);

     文件目录：

    


 

     界面效果：

      


       若这样写：background:url(images/tick.png);或background:url(/images/tick.png);会发现列表项前的“项目

       符号”消失了。

      


   <2> 若样式表嵌在HTML文档中：则background:url(images/tick.png);

     与上面相反，当把CSS嵌入HTML文档时，即文件目录如图：

    


     这时背景设置应为：background：url(images/tick.png);   与<1>相反，当设置为background：url(../images/tick.png);和background：url(/images/tick.png)时无效。

    

     是不是很简单呢，现在你的问题解决了吗？