奇怪的问题:

.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. 总结基础OOP(面向对象)

    OOP其实也就是面向对象编程.  一:什么是对象:  我们最常见的理解方式无非是:对象(object)是任何看得见.摸得着.感觉得到,可以获得的东西,有自己的标识的任何东西.对象是某一类的事物的具体个 ...

  2. Ubuntu 安装Appium

    1.安装node apt-get install node.js 2.安装npm apt-get install npm 3.安装cnpm npm install -g cnpm 创建链接:ln -s ...

  3. master_pos_wait函数与MySQL主从切换

    背景 主从切换是高可用MySQL架构的必要步骤(即使用不发生,也要有备无患).一般设置为双M(M1.M2),假设当前状态为写M1,而M2只读,切换的大致流程如下: 1.  停止应用写M1,将M1设置为 ...

  4. SQL Server之LEFT JOIN、RIGHT LOIN、INNER JOIN的区别

    很多人刚入门的时候分不清LEFT JOIN.RIGHT LOIN 和 INNER JOIN的区别,对它们的定义比较模糊,今天就简单的介绍一下它们的区别,对于入门的人来说,应该能够帮助你们理解. lef ...

  5. 如何处理导出的csv无法查看身份证后三位的情况?

    如何处理导出的csv无法查看身份证后三位的情况? 原因:excel中如果是常规格式无法显示那么多位数,改成文本格式就可以. 简单步骤,导入数据------>选择数据来源------>选择编 ...

  6. 任务调度框架Quartz原理简介

    [TOC] 第一章 Quartz 1.1 Quartz概念 Quartz是OpenSymphony开源组织的一个Java开源项目, 在2009被Terracotta收购.Quartz官网 1.2 Qu ...

  7. 降维之pca算法

    pca算法: 算法原理: pca利用的两个维度之间的关系和协方差成正比,协方差为0时,表示这两个维度无关,如果协方差越大这表明两个维度之间相关性越大,因而降维的时候, 都是找协方差最大的. 将XX中的 ...

  8. 学习web前端技术的笔记,仅供自己查阅备忘,图片上传预览

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  9. 【干货分享】dos命令大全

    一般来说dos命令都是在dos程序中进行的,如果电脑中安装有dos程序可以从开机选项中选择进入,在windows 系统中我们还可以从开始运行中输入cmd命令进入操作系统中的dos命令,如下图: 严格的 ...

  10. 在.Net中将RocketMQ跑起来_入门篇【2】

    上一篇讲了如何再控制台将RocketMQ跑起来,本篇讲解,在asp.net mvc种跑起来,含(发布.订阅). 本次将不挨个贴源码,直接展示目录,根据上一篇文章,进行相应的调整即可. 1.新建一个类库 ...