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)时无效。
是不是很简单呢,现在你的问题解决了吗?