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");
}

  

 

时间: 2024-08-27 00:54:27

background:url() 背景图不显示的相关文章

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

在项目中一段这样的代码 背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=" background: url(/U_HomeImage/T_CityManage/4_CM_Pic.png?2014-8-4 16:46:51) no-repeat left;background-size: 180px 87px;padding-left: 190px;"> 图片

css背景图不显示的问题

css添加背景图片无法显示,有以下几方面原因: 1.css没有被调用:请检查css调用是否成功. 2.css图片地址不对:请检查css图片地址是否正确. 3.div的高度没有固定,是auto或者没有设值:div设置错误容易导致背景图片高度太大则无法显示. 4.div被嵌套:查看嵌套的div是否设置正确. 5.div代码不规范:请检查div代码是否书写正确. 另: 原文地址:https://www.cnblogs.com/-ting/p/12000674.html

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

突然发现临下班时候问题就多, 马上下班了被头头告知线上已经上线很久的活动现在有个兼容性问题, a标签的背景图在ie8下会有不显示的情况. 我自己找了台ie8的机器实验了一下, 发现一切正常, 但是在另外一个同事机器上就会有这个问题, 真心奇怪! 后来找到问题的原因, 是因为在ie8下要显示a标签的背景图有一个重要属性: display:block; 同时还要注意background属性中 no-repeat 前面的空格. 改正之后, 背景图正常显示了. 不过同是ie8, 一个可以, 一个却不行这

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

笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器Safari.Opera下不兼容的问题,其中IE6最为棘手,历来IE6就被诸位前端代码人员所诅咒,无奈其用户在 中国大陆又非常多!可恶的微软啊,你当年造IE6的时候为何不严格遵守W3C标准呢? 今天做公司的交友网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪

CSS 背景图拉伸 兼容 FF Chrome IE 等主流浏览器(转)

注:本文欢迎转载,以下为本人亲测,转载请注明:http://blog.csdn.net/wqmain/article/details/8844286 相信各位一定碰到过这种情况,按钮作为DIV的背景图来显示,实际上有多个这样的按钮,而且DIV中的文字,也就是按钮上要显示的文字内容和个数都 不定,这种情况下就需要用背景图片拉伸效果来处理了,只需做一个按钮图片,作为DIV的背景图时随着DIV的宽度或高度自适应就OK了.网上也找过,但不 兼容IE或有bug,下面贴出本人亲测代码,兼容主流浏览器,包括F

浏览器兼容问题——IE7/IE/8下背景图片不显示

在无休止的IE兼容调试中,今天又遇到一个蛮恶心的问题. 那就是在IE/7 IE/8下背景图不能显示(IE/6没试) 首先,这是我的源码 出来的效果是这样的 秉承了不会就百度的优良传统,找了N久的答案,终于... 没错!以上就是正确答案,什么没区别?你仔细瞧瞧背景图地址后面连写的那一句那~ 要多一个空格!!!(当然看到答案真的J8都气大) 解决后...

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

一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是在此总结了下二者的区别: 1. css中的图片以背景图形式存在,写在html中的图片以标签形式存在.而在网页加载过程中,以css背景存在的图片会等到html结构加载完成才开始加载,而html中的img标签是网页结构(内容)的一部分会在加载结构的过程中加载. 附:在一个单纯由Html和Css组成的页面中,背景图片总是最后加载的,那么假若我们想要使用较小的背景图片

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

思路:vue中图片合并 首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和图片的尺寸位置 开始时canvas是隐藏的,两张背景图时显示的,当canvas画完后再转为img的时候,隐藏canvas和背景图,显示canvas转完的图片(也就是合并后的图片) 这个适配方式可能有些瑕疵,所以会加了很多设备的判断 代码: html      <div class="wap-p

html始终让元素居中显示,背景图铺满随便拖动不出界

首先,写两个class属性 body { margin: 0; padding: 0; height: 100%; width: 100%; background-image: url(../Content/Images/background.jpg); background-repeat: no-repeat; background-size: cover; } .login { height: 300px; width: 400px; border: 1px solid #f00; posi