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>若样式表文件与内容分离:backgroundurl(../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)时无效。

    

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

 

  • 10
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值