2 horace2012 horace2012 于 2016.09.27 10:43 提问

background:url中的路径问题

网站页脚的CSS中使用background:url设置了图片背景,CSS代码如下
.footer {
background: url(/pages/cloud7.0/image/j28.jpg) no-repeat center top;
padding-top: 40px;
position: relative;
height: 235px;
}
但是浏览器获取不到图片,浏览器提示如下
GET http://IP:8080/pages/cloud7.0/image/j28.jpg 404 (Not Found)
确实这个路径是不正确的如果是http://IP:8080/webname/pages/cloud7.0/image/j28.jpg就可以获取到图片
为什么浏览器解析这个路径的时候没有带上webname呢?要怎么解决?

3个回答

qq_24504121
qq_24504121   2016.09.27 11:22

pages是根目录吗

horace2012
horace2012 不是,pages在根目录下
接近 2 年之前 回复
weiyh_hi
weiyh_hi   2016.09.27 15:06

在CSS文件中设置background的url的值,相对地址应该是图片相对于你当前CSS文件所在的路径

showbo
showbo   Ds   Rxr 2016.09.27 21:20

楼主去了解下路径,你这个是绝对路径,从根目录下算起了,如果你的文件夹在跟目录的webname下,要加上webname

 background: url(/webname/pages/cloud7.0/image/j28.jpg) no-repeat center top;
showbo
showbo 你的webname不是更目录,是网站根目录下的一个子目录
接近 2 年之前 回复
showbo
showbo 回复horace2012: http://IP:8080这个绑定的目录才是根目录
接近 2 年之前 回复
horace2012
horace2012 我的webname就是根目录,是要把根目录也拼到url里面么?
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
background-image(CSS) url 路径问题
background-image(CSS) url 路径问题  从css 的相对路径找起
css样式表里面引用background-image时,url路径错误原因及解决方法
一直对css中background-image:url的路径问题存在误解,半知半解的,有时候路径写的对,有时候又是错的,完全碰运气,今天写resume时又遇到这个问题,在此整理下: css样式表中background-image要引入image文件夹下的portrait.jpg图片, 正确的写法是: background-image:url('../image/portrait....
webpack生成的css文件中background:url()图片路径问题
-
JavaWeb项目前端学习之CSS background-image的url路径问题
比较可取的是采用相对路径的方法 在项目的WebContent下新建images文件夹,然后引用改文件夹下图片的相对路径:background-image: url("../images/background.jpg"); 另外补充关于background-image和元素插入图片的区别: background-image属性的特定用途是给元素设置背景图像,唯一的目的是提高元素的吸引力
asp.net mvc css url
asp.net mvc4 的 cshtml文件中支持 虚拟路径的语法,如 Home         但是,css 文件中不支持这种语法,比如这样的文件结构: Project ----Content --------images ------------ok.png --------Site.css          如果我在Site.css文件中这样引用图片ok.png是不行的 #
vue踩坑系列——backgroundImage路径问题
在前端开发中,background-image属性非常常见,有很多时候需要使用内联样式来绑定此属性,但是在vue-cli项目中,如果如下面代码填写路径会找不到图片 import TemplateNav from './TemplateNav' export default { name: 'FooterNav', components: { 'TemplateNav': T
初学HTML5,总遇到关于img和background-img使用时遇到的路径问题
刚开始学习HTML5的时候,总在关于什么时候使用img标签,什么时候使用background-image,感觉两者都可以,而且关于图片的引用路径经常弄错,导致图片显示不出来。 今天,就特地来总结一下关于这些问题的解决经验。        一、什么时候使用img标签         img标签是行内块级(inline-block)标签,直接写在body文件里,用于向他人展示图片的内容信息,对整
webpack file-loader 解析 css 文件中 background-image路径问题。
webpack file-loader 解析 css 文件中 background-image路径问题。通过 webpack 的 file-loader 把 css 中的 background-image 图片提取出来构建到输出目录(例如dist或者build目录),发现图片被生成在了产出目录的根目录。webpack.config.js文件配置var webpack = require('webpa
background-image:url();url中怎么写;以及区分background属性;
background-image:用于设置需要显示背景图片;  例如-->background-image:url(demo.jpg); 大家知道ulr()中是填写路径:(现在假设背景图片名字叫做demo.jpg) 1、如果该css文件和背景图片在同一文件夹存在且并不包含于其他文件夹 那么直接填写demo.jpg; -->background-image:ur
CSS定义背景图片background-image须注意路径问题
    在传统的表格布局中,背景图片是直接应用于表格的,一般情况下CSS的background-image属性使用非常少,或者说根本就不使用。应用CSS网页布局,实现内容与表现、行为相分离,作为页面框架、装饰等图片我们就直接剥离到CSS文件中,通过CSS进行定义。  我们通常用link的方法直接引用一个CSS文件到HTML(或其它活动文档)文件中。我们会发现有时候我们的图片无法显示了。此时,请查看