background:url() 背景图不显示

时间:2022-09-09 11:03:56

奇怪的问题:

.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的上一级目录

background:url() 背景图不显示

  通过浏览器调试,可以发现从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实现缩略图控制循环&comma;循环背景图,显示多图轮播,点击左右滚动一张图

    效果图: 本姐只展示关键代码哈 上代码:网站有完整代码,但是数据不是循环的.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&lpar;海报图,将二维码和背景图合并&rpar; -----vue

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

随机推荐

  1. 潭州学院-JavaVIP的Javascript的高级进阶-KeKe老师

    潭州学院-JavaVIP的Javascript的高级进阶-KeKe老师 讲的不错,可以学习 下面是教程的目录截图: 下载地址:http://www.fu83.cn/thread-283-1-1.htm ...

  2. 修复docker pull image failed

    修复docker pull image failed docker pull报错 message":"Get https://n6-026-137.byted.org/v1/_pi ...

  3. RAID磁盘阵列笔记

    磁盘阵列RAID是服务器维护的必备知识,以前不太关心服务器维护方面的知识.目前要负责维护机房里的几台服务器,所以要关注这方面的内容. 磁盘阵列是用多块独立磁盘组成,提供两个方面的作用:数据安全冗余 和 ...

  4. Fitbit Flex 智能手环佩戴心得 主要说说过敏

    参杂一篇杂文. 也是因为体重飙升,所以去年下半年的时候入手了一个Fitbit flex. 当时相比Jawbone up,nfc和ble的特性,以及防水性还是更吸引我一点.所以就入手了. 佩带了如此长的 ...

  5. 传染病控制(codevs 1091)

    题目描述 Description [问题背景] 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国 大范围流行,该国*决定不惜一切代价控制传染病的蔓延.不幸的是,由于人们尚未 ...

  6. 说一个Sublime Text 2插件、emmet(原名:zen Coding&rpar;

    工具/原料 sublime Text 2 安装emmet插件 方法/步骤 生成html文档初始结构: !<tab> <!doctype html> <html lang= ...

  7. ERP 推式 拉式 工序拉式 装配拉式 倒冲

    ERP 推式  拉式  工序拉式   装配拉式   倒冲 以上為生产订单(wip)中的原料供应方式,最常用的有Pull和Push. PULL即拉动方式: 拉式生产是生产为主,原材料是由专门的配送人员按 ...

  8. ios Using CocoaPods to Modularize a Big iOS App-&gt&semi;使用CocoaPods来进行模块化开发

    Selecting the right architecture for your mobile app is a pretty big deal. It will shape your daily ...

  9. mt7601 driver

    http://download.csdn.net/detail/u011500307/7011649 http://my.oschina.net/fgq611/blog/180750 http://b ...

  10. Win7&plus;QTP10&period;0&plus;IE9无法识别对象的解决方法

    在WIN7和IE9环境下使用QTP10,会出现识别不了web对象的情况,具体表现为:添加对象,先打开对象库,再打开IE,点击Add object to local 后,出现白色手指,将其拖拉到百度首页 ...