背景图片不显示的原因: 
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. 【2017年新篇章】 .NET 面试题汇总(一)

    开篇 本次给大家介绍的是我收集以及自己个人保存一些.NET面试题 简介 此次包含的不止是.NET知识,也包含少许前端知识以及.net面试时所涉及的种种考点,希望能给找工作的同学们哪怕一点点帮助. 古人 ...

  2. 分布式配置管理--百度disconf搭建过程和详细使用

    先说官方文档:http://disconf.readthedocs.io/zh_CN/latest/index.html 不管是否要根据官方文档来搭建disconf,都应该看一下这一份文档.精炼清晰地 ...

  3. ldd获得可执行程序的所有库并输出到指定目录

    #!/bin/bash ########################################################################## #ldd可以查看程序的库依 ...

  4. memcached学习总结

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

  5. Oracle11G卸载教程

    用Oracle自带的卸载程序不能从根本上卸载Oracle,从而为下次的安装留下隐患,那么怎么才能完全卸载Oracle呢?那就是直接注册表清除,步骤如下: 1. 开始->设置->控制面板-& ...

  6. jwplayer 禁止视频的快进,但是可以后退(已实现)

    一直在研究.net 的视频播放,最近做起了jwplayer,然后项目要求是视频不能快进,但是可以重复观看已经看过的视频资源. 很简单 在标签<script> 中定义两个变量 var max ...

  7. JavaScript基础——兼容性、错误处理

    JavaScript基础-错误处理Throw.Try.Catch try语句执行可能出错的代码 catch语句处理捕捉到的错误 throw语句创建自定义错误语句 发生的常见的错误类型 可能是语法错误, ...

  8. JAVA学习之动态代理

    JDK1.6中的动态代理 在Java中Java.lang.reflect包下提供了一个Proxy类和一个InvocationHandler接口,通过使用这个类和接口可以生成一个动态代理对象.JDK提供 ...

  9. android studio 中的 gradle version

    刚开始接触AS,从geithub上download了好多项目,每一个都需要改动,对我这种新手来说,慢慢琢磨吧 问题一: 解决办法: 在build.gradle中,将gradle的版本改正如上图所示即可 ...

  10. 微信开发模式 api 接口文档简介

    微信公众平台分为订阅号和服务号,服务号提供9大接口,需要通过微信认证后才能使用这些接口.认证费用300元.下面是接口的大致介绍: 1. 语音识别:通过语音识别接口,用户发送的语音,将会同时给出语音识别 ...