`

内联CSS的background-image属性图片相对路径设置失败的原因

    博客分类：
  • Html
CSS 
阅读更多
编辑母板页时，若在内联CSS里使用诸如background-image: url(title.jpg)或background-image: url(/title.jpg)或background-image: url(../title.jpg)或background-image: url(~/title.jpg)，都将导致网页的图片无法显示，或者是位于其他目录的网页，或者是全站的所有网页。

为了解决这一问题，可以将该属性放到单独的CSS文件中，CSS文件和图片文件位于同一目录下，属性设置为background-image: url(title.jpg)，再在母板页中引用该CSS，这样就可以解决了。

所以可以看出，background-image: url(title.jpg)，的url中的路径默认是相对于该css文件所在位置的路径，当然会找不到图片了，所以要从当前css目录回到根目录在加上图片的路径就可以了。
1
顶
0
踩
分享到：
| html＋css总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Web前端开发基础：综合练习 .ppt

    CSS层叠式样式表 CSS选择器 CSS背景属性 CSS导航菜单 布局属性 层叠式样式表的使用方法 1）内联式样式表-在body内实现 2）内嵌式样式表-在head内实现 3）外部链接式样式表-在文件外调用 4）导入外部样式表 1、背景色...

    CSS3样式表- 层叠样式表种类.pptx

    background-image:url(img/bg.gif); } h1{ color: red; } 网页设计是一门很有趣的课 ;;;;;;;第一：样式表的语法；选择器{属性:值;} 第二：样式表的作用； 第三：样式表种类： 内联样式<标签名 style=”属性:值...

    postcss-svgo:使用PostCSS优化内联SVG

    安装使用可以： npm install postcss-svgo --save例子输入 h1 { background : url ( 'data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ...

    css入门笔记

    属性：background-image：url(); 取值：url() 3.背景图像平铺 属性：background-repeat 取值： 1.repeat 默认值，横向和纵向同时平铺 2..repeat-x 纵向平铺 4.背景图像尺寸 属性：background-size: ...

    XMl实用大全（资料全易学习）

    12.11.2 background-image属性 365 12.11.3 background-repeat属性 367 12.11.4 background-attachment属性 368 12.11.5 background-position属性 369 12.12 文本属性 373 12.12.1 word-spacing属性 373 12.12.2 ...

    xml实用大全和轻松学习手册和无废话xml

    12.11.2 background-image属性 365 12.11.3 background-repeat属性 367 12.11.4 background-attachment属性 368 12.11.5 background-position属性 369 12.12 文本属性 373 12.12.1 word-spacing属性 373 12.12.2 ...

    XML实用大全----xml详细参考书

    12.11.2 background-image属性... 365 12.11.3 background-repeat属性... 367 12.11.4 background-attachment属性... 368 12.11.5 background-position属性... 369 12.12 文本属性... 373 12.12.1 word-spacing...

    front-end-practice

    快速校园“在线一站式前端开发超级差距包” 星巴克网站实施实践（starbucks...在CSS中，您可以使用background或background-image属性将背景图像插入到元素中。 块代码突出显示 < a href =" https://www.google.com "

    XML实用大全(web开发必备手册)

    12.11.2 background-image属性... 365 12.11.3 background-repeat属性... 367 12.11.4 background-attachment属性... 368 12.11.5 background-position属性... 369 12.12 文本属性... 373 12.12.1 word-spacing...

    XML编程综合资料库

    12.11.2 background-image属性... 365 12.11.3 background-repeat属性... 367 12.11.4 background-attachment属性... 368 12.11.5 background-position属性... 369 12.12 文本属性... 373 12.12.1 word-spacing...

    scepter:移动网络检查器

    相对 URL CSS background-image （ ） 贡献 谢谢！ 完成CONTRIBUTORS.md自己添加到CONTRIBUTORS.md :smiling_face_with_smiling_eyes: 一些想法可以重复： 内联控制台 显示元素样式 使用内联编辑器将本地 CSS ...

    XML实用大全

    365 12.11.2 background-image属性... 365 12.11.3 background-repeat属性... 367 12.11.4 background-attachment属性... 368 12.11.5 background-position属性... 369 12.12 文本属性... 373 ...

    procss-inline

    进程内联 用于内联 url() 的 -plugin。 特征 仅处理特定的 url，由/* procss.inline() */注释匹配 可以内联多个背景网址 可以使用 URI 编码内联 svg 文件 用法 使用安装： $ [sudo] npm install procss-inline --...

Magicbox
Global site tag (gtag.js) - Google Analytics