background:url() 背景图不显示
奇怪的问题:
.box-3 {
width: 100%;
height: 500px;
border: solid 2px red;
margin-top: 70px;
padding: 0 0 0 800px;
box-sizing: border-box;
background: url("img/aike.jpg");
}
居然不能显示出背景图片,路经似乎是正常的
问题原因:
在url(imagepath)里的这个imagepath(图片路径)。这个url寻址位置是以css文件夹为root目录,也就是导入css的上一级目录

通过浏览器调试,可以发现从css下面的img来找图片,但是img和css是平级的文件夹,就是说css下面是没有img这个文件夹存在的,所以浏览器当然报错了,因为根本找不到
那,解决办法?
让其向上找一级,在让他找到img目录 ,在图片路径上加上 ../ 让其以上一级目录为root目录
.box-3 {
width: 100%;
height: 500px;
border: solid 2px red;
margin-top: 70px;
padding: 0 0 0 800px;
box-sizing: border-box;
background: url("../img/aike.jpg");
}
background:url() 背景图不显示的更多相关文章
- background: url 背景图片加时间戳不显示图片
在项目中一段这样的代码 背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=&q ...
- vue 生产环境 background 背景图不显示原因
通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片 ...
- Vue-Awesome-Swiper实现缩略图控制循环,循环背景图,显示多图轮播,点击左右滚动一张图
效果图: 本姐只展示关键代码哈 上代码:网站有完整代码,但是数据不是循环的.https://surmon-china.github.io/vue-awesome-swiper/ 循环数据的代码在此: ...
- webpack打包之后背景图不显示的问题
修改build/utils.js文件里面的ExtractTextPlugin,添加:publicPath: ‘…/…/’,具体代码如下:
- 遭遇input与button按钮背景图失效不显示的解决办法
笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...
- a标签的背景图在ie8下不显示的问题
突然发现临下班时候问题就多, 马上下班了被头头告知线上已经上线很久的活动现在有个兼容性问题, a标签的背景图在ie8下会有不显示的情况. 我自己找了台ie8的机器实验了一下, 发现一切正常, 但是在另 ...
- html的css背景图的repeat
HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...
- css背景图与html插入img的区别
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...
- js多张图片合成一张图,canvas(海报图,将二维码和背景图合并) -----vue
思路:vue中图片合并 首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和 ...
随机推荐
- Java学习笔记10---访问权限修饰符如何控制成员变量、成员方法及类的访问范围
1.Java有三种访问权限修饰符,分别为public.protected.private,还有一种为缺省权限修饰符的情况,记为default.其中,可以由public和default来修饰类:这四种修 ...
- python3之装饰器
1.装饰器 装饰器本质上是一个python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能,装饰器的返回值也是一个函数对象.它经常用于有切面需求的场景,比如:插入日志.性能测试.事务处 ...
- Linux redhat ICE环境安装
1.安装64位redhat6.4操作系统(客户机为64位)为软件开发工作站模式. 2.卸载yum源,重新安装为免费的CentOS6.4 yum源(yum能解决软件安装中的包依赖问题,redhat 未注 ...
- 意外断电数据库无法启动牵扯到异步IO的参数设置
一客户机房新装的UPS不太稳定,好几次意外断电,第3次意外断电之后问题终于来了, 数据库起不来了-- 数据库的硬件环境是一台IBM DS5020存储,2台IBM X3850 X5 软件环境是Linux ...
- Linux架构浅谈
以下图为基础: 最内层是硬件,最外层是用户常用的应用,比如说firefox浏览器,evolution查看邮件,一个计算流体模型等等.硬件是物质基础,而应用提供服务.但在两者之间,还要经过一番周折. 还 ...
- ubuntu使用rdesktop连接win10的两个问题
关闭防火墙,解决主机ping不通虚拟机的问题 win10需要修改注册表 \HKLM\SYSTEM\CurrentControlSet\Control\Terminal Server\WinStatio ...
- FileSaver.js 介绍
这是著名开源项目 FileSaver.js 的 README.md,我把它翻译成中文.发出来,方便自己和他人阅读. 项目地址:https://github.com/eligrey/FileSaver. ...
- 咫尺论坛|即速应用-微信小程序社区
咫尺论坛|即速应用-微信小程序社区 是一个集微信和支付宝小程序行业资讯.开发资源.技术交流于一身的大型小程序开发论坛,成立伊始便迅速聚集了一大批小程序开发爱好者,短时间内成为了国内领先的小程序开发者社 ...
- struts2(三)之表单参数自动封装与参数类型自动转换
前言 对struts2的使用不外乎这几点,参数自动封装,拦截器的使用,数据校验,ognl表达(值栈和actionContext的讲解),struts2的标签,struts2的国际化, struts2的 ...
- 基于Windows下浏览器无法正常打开的解决方案
Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...