`

内联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
分享到:
评论

相关推荐

    前端开源库-css-background-video

    在CSS中,我们使用`background`属性或者其子属性(如`background-image`、`background-size`、`background-position`、`background-repeat`)来设置背景视频。其中,`background-size`用于控制视频的大小,`...

    通过js获取div的background-image属性

    在这里,`getElementById`方法用于获取ID为`img_2`的`div`元素,然后通过`.style`属性访问其内联样式,最后`.backgroundImage`获取背景图像的CSS属性值。返回的`backgroundImage`值是一个字符串,格式通常是`url('...

    简述CSS中的背景属性background

    其次,`background-image`属性允许设置一个或多个背景图片。你可以通过`url()`函数提供图片的URL,或者使用`none`值去除背景图片。同时,可以使用逗号分隔多个背景图片,它们将按照声明的顺序堆叠: ```css .left {...

    CSS常用属性一览表

    - **`background`**:可以同时设置背景颜色、图片和其他属性。例如:`background: transparent;`。 - **`background-image`**:定义背景图像。例如:`background-image: url(/image/bg.gif);`。 - **`background-...

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

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

    css图片样式

    1. `background-image`: 这是设置元素背景图片的基本属性,可以是URL、渐变、甚至是其他元素的引用。例如:`background-image: url("image.jpg");` 2. `background-repeat`: 控制图片是否平铺,可选值有`repeat`...

    Css+div_常用CSS标签及属性

    * background-image:设置背景图片 * background-repeat:设置背景图片是否重复排列 * background-attachment:设置背景图片是否卷动 * background-position:设置背景图片或背景颜色的开始显示位置 * background:...

    css常用属性

    ### CSS常用属性详解 #### 一、CSS文字属性 CSS中的文字属性可以帮助我们调整文本的显示方式,使得页面上的文字更加美观和易于阅读。 - **color:** 用于设置文本的颜色。例如:`color:#999999;` 将文本颜色设置为...

    课程divcss常用标签.pdf

    background-image属性用于设置背景图片,可以使用url(imageURL)格式。background-repeat属性用于设置背景图片是否重复排列,有repeat、repeat-x、repeat-y、no-repeat等值。background-attachment属性用于设置背景...

    Javascript获取background属性中url的值

    在这个例子中,`getElementById`函数被用来获取ID为`image-preview`的元素,然后我们访问`style`属性并读取`backgroundImage`。这将返回一个字符串,格式可能是`url("path/to/image.jpg")`。 如果我们要提取出URL...

    css基础-梦之都教学

    - `background-image`:可以设置背景图片。 - `background-repeat`:控制背景图片的重复方式。 - `background-position`:设定背景图片的位置。 - `background-attachment`:决定背景图片是否随滚动而移动。 - `...

    Css+div 常用CSS标签及属性.pdf

    - `background-image`属性用来设置背景图片,其值为图片的URL。 - `background-repeat`属性控制背景图片的重复方式,可选值有repeat、repeat-x、repeat-y和no-repeat。 - `background-attachment`属性决定背景图片...

    CSS(层叠样式)学习笔记

    background-repeat 属性设置水平(repeat-x)、垂直(repeat-y)平铺或不平铺(no-repeat)。background-position 属性定义定位。例如:background-position:right top; 五、CSS 文本格式 CSS 文本格式属性用于...

    javascript经典特效---INPUT框中的背景图片.rar

    $("#myInput").css("background-image", "url('new-image-path.png')"); ``` 8. **伪类选择器**:还可以利用`:focus`伪类,当输入框获取焦点时改变背景图片,增强用户体验: ```css input:focus { background-...

    JS中的CSS_Style属性标签对照表.docx 含有CSS 的详细属性说明

    在JavaScript中,对元素的CSS样式进行操作是常见的任务,这通常涉及到`element.style`对象。这个对象允许我们直接...在实际编程中,我们可以通过`element.style.property = value`的形式来设置或获取这些CSS属性的值。

    XML应用开发(软件品牌)-1期 4.11 课堂实践-使用CSS布局属性显示XML文档-环绕文本和插入图片.doc

    - `background-image`属性:可以将CSS应用于`picture`元素,设置其`background-image`属性为电影海报的URL,这样图片就会作为背景显示在该元素内。 - `background-size`属性:控制图片的大小,如`cover`或`contain...

    day04(CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性).rar

    例如,`background-color`用于设定元素的背景色,`background-image`允许添加图片作为背景,`background-repeat`控制图片是否平铺,`background-position`可调整图片的位置,而`background-attachment`决定了背景...

Global site tag (gtag.js) - Google Analytics