背景图片不显示的原因: 
1. css没有被调用 
2. css图片地址不对 
3. div的高度没有固定,是auto、没有设值或者高度不够 
4. div被嵌套 
5. div代码不规范

解决办法: 
(1)DIV高度为自动,背景颜色无法显示,在代码中将原代码height:auto; 改为height:100%; overflow:hidden;!important;同时还可以兼容 IE6、7、8和谷歌火狐。 
(2)假设对一个对象设置了background背景颜色样式,该对象内部盒子有使用float浮动属性样式,这个时候该对象浮动产生,导致该对象不能撑开,所以css背景颜色就不能无法显示,解决方法有三种,一个是设置clear清除浮动、设置css高度、设置css overflow样式。 
(3)高度限制造成了背景颜色不能显示完整,假如你有个对象没有计算好高度(或无意设置了一个很小高度属性样式),因为不确定内容有多少,当内容超过你设置高度限制,这个时候超出部分背景就可能无法显示。设置够高的高度,或取消删除高度样式即可。

案例:

<div style="width:960px;background-color:#000000">
<div style="width:300px; height:200px; float:left">左侧</div>
<div style="width:300px; height:200px; float:left">中部</div>
<div style="width:360px; height:200px; float:left">右侧</div>
</div>

因为外层的div没有设置高度,所以设置如上代码之后,看到的是三个透明的方框, 
正确代码如下:

<div style="width:960px; height:200px;background-color:#000000">
<div style="width:300px; height:200px; float:left">左侧</div>
<div style="width:300px; height:200px; float:left">中部</div>
<div style="width:360px; height:200px; float:left">右侧</div>
</div>

div背景图片或颜色不显示的解决办法的更多相关文章

  1. navigationItem.rightBarButtonItem 设置背景图片,颜色更改解决的方法

    self.navigationItem.rightBarButtonItem=[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@& ...

  2. ecshop验证码图片无法显示终极解决办法

    ecshop验证码图片无法显示终极解决办法 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2014-06-06   客户在安装好ecshop之后所有前台的证码不显示,后 ...

  3. android通过BitmapFactory.decodeFile获取图片bitmap报内存溢出的解决办法

    android通过BitmapFactory.decodeFile获取图片bitmap报内存溢出的解决办法 原方法: public static Bitmap getSmallBitmap(Strin ...

  4. iphone H5 input type="search" 不显示搜索 解决办法

    H5 input type="search" 不显示搜索 解决办法 H5 input type="search" 不显示搜索 解决方法 在IOS(ipad iP ...

  5. python matplotlib plot 数据中的中文无法正常显示的解决办法

    转发自:http://blog.csdn.net/laoyaotask/article/details/22117745?utm_source=tuicool python matplotlib pl ...

  6. LoadRunner打开WebTours只显示头部解决办法

    LoadRunner打开WebTours只显示头部解决办法   1.遇到这种情况,先查看一下路径HP\LoadRunner\WebTours下的cgierr日志中是否有错误,比如Can't open ...

  7. eclipse_neon 的Spket 目录下只有一个Task Tags,没有其他的选项,导致没有办法添加提示文件! 添加sdk文件之后还是没有办法显示的解决办法

    问题解决办法: 将 spket-1.6.23的安装包里面的features  plugins 单独复制到D:\eclipse_neon\dropins 目录下,重启一下eclipse即可正常显示! 添 ...

  8. dede5.7评论框不显示,文章页表情不显示,解决办法

    dede5.7评论框不显示,文章页表情不显示,解决办法 进入dede后台,系统-系统基本参数-其它选项,找到模板引擎禁用标签,去掉里面的php,如图 进入dede模板目录,默认是/templets/d ...

  9. webpack打包绝对路径引用资源和element ui字体图标不显示的解决办法

    webpack打包绝对路径引用资源解决办法: 打开webpack.prod.conf.js 找到output:增加 publicPath: './',  即可,如图  element ui字体图标不显 ...

随机推荐

  1. centos安装UCenter 和 UCenter_Home

    1.搭建lamp环境yum  –y  install  httpd  php  php-mysql  mysql  mysql-server 2启动服务   3.设置服务开机自动启动 4.上传UCEN ...

  2. 一个初学所了解的jquery事件

    在jquery中,事件总体分为两大类:简单是件和复合事件今天我们只来学习一下简单事件 绑定事件和事件处理函数的语法格式(DOM 对象.事件名=函数:) 简单事件分为: 1.window事件 所谓win ...

  3. memcached学习总结

    一.介绍1.基于libevent的事件处理 libevent是一套跨平台的事件处理接口的封装,能够兼容包括这些操作系统:Windows/Linux/BSD/Solaris 等操作系统的的事件处理.包装 ...

  4. TempDB问题定位与解决

    步骤1.TempDB压力诊断 等待类型诊断 TempDB的争用压力在等待篇中已经简单介绍,等待的表现为 pagelatch_类等待,等待的资源是 “2: X :X ” tempDB所在磁盘的响应时间 ...

  5. Linux 下查看CPU的使用情况

    1.top使用权限:所有使用者使用方式:top [-] [d delay] [q] [c] [S] [s] [i] [n] [b]说明:即时显示process的动态d :改变显示的更新速度,或是在交谈 ...

  6. javascript : detect at the end of bottom

    function isScrollBottom() { var documentHeight = document.documentElement.scrollHeight; var winHeigh ...

  7. HTML移动端开发常见的兼容性总结

    1.安卓浏览器看背景图片,有些设备会模糊.用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网 ...

  8. 【曝】苹果应用商店逾千款iOS应用存安全漏洞

    据国外网站Ibtimes报道,知名网络安全公司FireEye日前警告称,由于一款名为“JSPatch”.可帮助开发者修改应用程序的软件上存在安全漏洞,导致苹果应用商店内1000多款使用了该框架的iOS ...

  9. visibility: hidden和 display: none的区别

    visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着. display: none----将元素的显示设为无,即在网页中不占任何的位置.

  10. 解决VS2015 VBCSCompiler.exe 占用CPU100%的问题

    使用VS2015重复编译运行会发现系统运行缓慢甚至卡死,打开windows任务管理器可以发现CPU已经飙到了100%, VBCSCompiler.exe进程出现多个实例并且占用了大量CPU. 解决方案 ...