关于外部样式表中background-image:url()的设置

在前文中曾经提到,我遇到了一个问题,就是在外部CSS文件中定义了背景图,无法在引用它的html文件中显示。具体来说是这样的:样式表文件Style1.css放在~/Style文件夹下,在~/Admin文件夹下有个index.aspx引用了这个外部样式表,在Style1.css文件有这样的定义:.logo{background-image:url(../pic/logo.jpg);width:900px; height:100px; text-align:center;margin-left:auto;margin-right:auto;},但是,index.aspx并无法显示指定的背景图片,而其它样式都没有问题。今天抽时间琢磨了一下,终于弄明白是啥原因啦。

原来,这个错误源于我对外部CSS文件的一个误解。我一直以为,当在html中引用外部样式表后,那么在样式表文件中定义的样式就相当于在html头文件中定义的样式了。但事实证明并非如此,它依然存放在定义的文件中被一起下载到客户端。这一点从background-image的url属性定义的实践上也可以清楚地看出,在定义url时,如果是绝对地址当然没什么问题,如果是相对地址,那么,一定要相对style1.css所在的路径,而不必考虑即将引用它的html文件的路径。

现在想明白这个事儿,再回过头来看看,其实人家这个设计也是顺其自然的设计。试想,如果以引用者的文件路径为准,那该给使用者造成多大的麻烦啊——瞧我这浆糊脑袋!

最后总结一下:在外部样式表中定义url属性时,如果采用相对路径,那么这个路径一定是以该样式表文件所在路径为准的。经验之谈,有失偏颇之处欢迎指正。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极客行天下

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值