奇怪的问题:

.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() 背景图不显示的更多相关文章

  1. background: url 背景图片加时间戳不显示图片

    在项目中一段这样的代码 背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=&q ...

  2. vue 生产环境 background 背景图不显示原因

    通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片 ...

  3. Vue-Awesome-Swiper实现缩略图控制循环,循环背景图,显示多图轮播,点击左右滚动一张图

    效果图: 本姐只展示关键代码哈 上代码:网站有完整代码,但是数据不是循环的.https://surmon-china.github.io/vue-awesome-swiper/ 循环数据的代码在此: ...

  4. webpack打包之后背景图不显示的问题

    修改build/utils.js文件里面的ExtractTextPlugin,添加:publicPath: ‘…/…/’,具体代码如下:

  5. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  6. a标签的背景图在ie8下不显示的问题

    突然发现临下班时候问题就多, 马上下班了被头头告知线上已经上线很久的活动现在有个兼容性问题, a标签的背景图在ie8下会有不显示的情况. 我自己找了台ie8的机器实验了一下, 发现一切正常, 但是在另 ...

  7. html的css背景图的repeat

    HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...

  8. css背景图与html插入img的区别

    一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...

  9. js多张图片合成一张图,canvas(海报图,将二维码和背景图合并) -----vue

    思路:vue中图片合并 首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和 ...

随机推荐

  1. and,or

    where语句的and or 连接 $map['_logic'] = 'and'; $map['_logic'] = 'or';

  2. hadoop的安装和配置(一)本地模式

    博主会用三篇文章来为大家详细的说明hadoop的三种模式: 本地模式 伪分布模式 完全分布模式 本地模式: 思路走向 |--------------------| | ①:配置Java环境  | | ...

  3. ThreadPool.QueueUserWorkItem引发的血案,线程池异步非正确姿势导致程序闪退的问题

    ThreadPool是.net System.Threading命名空间下的线程池对象.使用QueueUserWorkItem实现对异步委托的先进先出有序的回调.如果在回调的方法里面发生异常则应用程序 ...

  4. SQL Server 插入含有中文字符串出现乱码现象的解决办法

    ELECT  COLLATIONPROPERTY('Chinese_PRC_Stroke_CI_AI_KS_WS', 'CodePage')       --查询SQLServer编码格式的语句 下面 ...

  5. Django-基础之web框架

    http协议 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送 ...

  6. Java多线程同步问题:一个小Demo完全搞懂

    版权声明:本文出自汪磊的博客,转载请务必注明出处. Java线程系列文章只是自己知识的总结梳理,都是最基础的玩意,已经掌握熟练的可以绕过. 一.一个简单的Demo引发的血案 关于线程同步问题我们从一个 ...

  7. Zabbix实战-简易教程(7)--监控第一台host

    一.安装 agent 1.1 Agent分布 1.2 Agent安装 基础模板安装方法: wget -qO- http://zbxinstall.168.com:18888/base/agent-in ...

  8. ABP架构学习系列

    ABP实践学习系列 ABP Zero 本地化语言的初始化和扩展 ABP Zero 导航菜单之角色权限 ABP Zero示例项目问题总结  ABP后台服务之作业调度Quartz.NET   ABP架构学 ...

  9. 关于React中状态保存的研究

    在使用react搭配react-router做应用的时候,你可能遇到这样的问题,当我从第一个页面过渡到第二个页面,然后返回之后,发现之前的页面的状态全部不见了,即回到了初始的状态. 这点在页面存在多个 ...

  10. #pta循环作业

    7-7 计算阶乘和 1.题目 . 2.设计思路     此题目比一道类似的经典题目的区别就是不是直接的数字累加而是每次的数字先累乘之后再累加 只需要在累加之前处理一下所要加的数字就可以实现了 3.流程 ...