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和图片的清晰图和 ...
随机推荐
- [笔记]《JavaScript高级程序设计》- 最佳实践
一.可维护性 1 什么是可维护的代码 可理解性--其他人可以接受代码并理解它的意图和一般途径,而无需原开发人员的完整解释. 直观性--代码中的东西一看就能明白,不管其操作过程多么复杂. 可适应性--代 ...
- python中的深拷贝和浅拷贝理解
在python中,对象赋值实际上是对象的引用.当创建一个对象,然后把它赋给另一个变量的时候,python并没有拷贝这个对象,而只是拷贝了这个对象的引用.以下分两个思路来分别理解浅拷贝和深拷贝: 利用切 ...
- python 最基本的的单例模型的实现及应用
在我们python开发过程很多 ,在很多地方都会用到单例模式,确保数据的唯一性,最简单的单例模式,我们可以模块导入的方式实现,因为导入文件,无论import多少次 都只导入一次模块. 方法一:装饰器 ...
- 微信小程序demo-环球小镇
微信小程序-环球小镇说明:实现了环球小镇(huanqiuxiaozhen.com)移动端商城客户端部分功能,包括首页,分类,购物车,帐户,品牌列表,商品详情等功能. 项目下载:http://bb ...
- MySQL优化 - 索引优化
索引(在MySQL中也叫做"键(key)")是存储引擎用于快速找到记录的一种数据结构. 索引对于良好的性能非常关键,尤其是当表的数据量越来越大时,索引对性能(查询)的影响愈发重要. ...
- flask-sqlalchemy基本操作数据库
# -*- coding: utf-8 -*- from sqlalchemy.ext.declarative import declarative_base from sqlalchemy impo ...
- fb27a9aeaf604597826718c467cc9f4f 为什么我老收到这个
fb27a9aeaf604597826718c467cc9f4f 为什么我老收到这个fb27a9aeaf604597826718c467cc9f4f 为什么我老收到这个fb27a9aeaf60 ...
- React入门实例教程
文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React ...
- 基于Windows下python3.4.1IDLE常用快捷键小结
安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使用ALT+G 跳到对应行号,在右下角有显示光标所在行.列.ALT ...
- POJ2503-Babelfish-二分
Babelfish Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 44545 Accepted: 18803 Descr ...