背景图片不显示的原因: 
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. 阿里巴巴Java开发手册———个人追加的见解和补充(一)

    先上干货,<阿里巴巴Java开发手册>的下载地址 https://yq.aliyun.com/articles/69327?spm=5176.100239.blogcont69327.15 ...

  2. JUC学习笔记--从阿里Java开发手册学习线程池的正确创建方法

    前言 最近看阿里的 Java开发手册,上面有线程池的一个建议: [强制]线程池不允许使用 Executors 去创建,而是通过 ThreadPoolExecutor 的方式, 这样的处理方式让写的同学 ...

  3. IOS缓存管理之PINCache使用

    前言: 今年重点在于公司iOS架构的梳理工作,上周整理了http请求接口管理与解耦,接下来准备整理一下项目中的缓存处理,目前项目中使用的是PINCache,去年加入这个开源框架时并没有对这个框架进行了 ...

  4. Python学习一:Python简介

    Python简介: Python是目前广泛使用的一门动态语言,类似Java,源代码必须首先由编译器转换成字节码(byte code),然后再由解释器来执行字节码.与Java不同的是,Python的编译 ...

  5. java8-lamba表达式的使用-遁地龙卷风

    (-1)前言 学习lamba表达式是十分重要的,你会发现java变的可爱多了. (0)函数式接口 只有一个方法的接口称为函数式接口 JButton jButton = new JButton(&quo ...

  6. Activiti工作流(二)之常用操作

    前面介绍了Activiti工作流的基本操作,但是在实际应用过程中,往往不满足项目需求,因此还需要了解一些其他的功能比如:连线.排他网关.并行网管.流程变量.个人任务及组任务的三种发布方式. 下面将介绍 ...

  7. 【转】Tomcat源代码阅读系列

    在IntelliJ IDEA 和 Eclipse运行tomcat 7源代码(Tomcat源代码阅读系列之一) Tomcat总体结构(Tomcat源代码阅读系列之二) Tomcat启动过程(Tomcat ...

  8. 编程思想之——"人是活的,程序是死的"

    "人是活的,程序是死的"这句话我时常提起,可能很多人不是很理解我为什么会这样说,下面我就简单来谈谈我对这句话的理解. 1.不要因为技术而技术,技术选型的初衷是需求. 现在很多人在做 ...

  9. Redis【第二篇】集群搭建

    第一步:准备 1.安装包 ruby-2.4.0.tar.gz rubygems-2.6.10.tgz zlib-1.2.11.tar.gz redis-3.3.2.gem 2. 架构: 名称 IP 端 ...

  10. webpack-react之webpack篇(http://www.jianshu.com/p/794d573d2c53)

    构建一个小项目——FlyBird,学习webpack和react.(本文成文于2017/2/25) 从webpack开始本篇从零开始,详细记录webpack的各个方面.文章中将会放入很多链接以便扩展, ...