div背景图片或颜色不显示的解决办法

背景图片不显示的原因: 
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>
时间: 2024-12-25 15:18:38

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

关于网页中图片为中文名无法显示的解决办法

转载:http://lofei117.iteye.com/blog/1074182 网页中很多时候要用到图片,通过img标签或者滤镜来显示在页面上.而当文件名为中文名时会遇到图片无法正确加载,导致无法显示. 解决办法如下: 1:改变服务器的配置,使服务器支持utf-8来显示图片.这个经过测试是有效的,但是有一点是服务器配置修改了以后,再使用request来获取参数时,中文乱码的问题.通过System.out.print来打印出来的参数是正确的,但是赋值给String对象后却不是正确的值,再通过S

div嵌套div 背景图片 不显示的问题

这几天 在做一个小Demo的时候碰到了如上的问题,一个DIV嵌套多个DIV时,父容器DIV不显示背景图片.同时结合之前碰到类似的问题,我归纳了如下几个解决方法: 1.就是常见的 子div 背景把父div的背景给盖住了,例子: 该例子就是 我有一个父div 和它里面嵌套的一个子div,两个div的宽度和高度大小是一样的,其中父div的背景图片就是上面这张图片(箭头部分是透明的),子div的背景图片是那种渐变灰色图片,其实懂英语的人应该看出来了就是,我想实现一个那种类似于iphone滑动那种灯光从

CSS Sprites技术(将背景图整合到一张图中,再利用CSS背景图片定位到要显示的位置)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

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;"> 图片

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

self.navigationItem.rightBarButtonItem=[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"MoreImage"] style:UIBarButtonItemStylePlain target:self action:@selector(moreItemPress)]; 用这种方法,设置的背景图片,颜色变掉了.不是原来设置的图片颜色. 可以用另外一种方式,可以解决变色的问题. U

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

ecshop验证码图片无法显示终极解决办法 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2014-06-06 客户在安装好ecshop之后所有前台的证码不显示,后台可以显示,ECSHOP开发中心总结了解决办法分享给各位朋友. 可以在后台有,前台不显示 打开includes/init.php文件,将如下这段代码屏蔽即可. /* 判断是否支持 Gzip 模式 */if (!defined(‘INIT_NO_SMARTY’) && gzip_enabled())

层不能跨框架(包括TEXTAREA)显示的解决办法

这个问题尤其在写菜单的时候经常遇到,即:一个页面内的"层"无论z-index设的多么大,只要遇到框架等便被截了:( 其实解决办法很简单,在要跨框架的层里加入<iframe>即可解决: <div style="position:absolute;width:140;height:200;z-index:10"><iframe src="menu.asp" width='100%' height='100%'>&l

关于Qt中 中文显示的解决办法

关于Qt中 中文显示的解决办法 在linux平台下,这样显示中文 QLabel *label = new QLabel; QTextCodec *codec = QTextCodec::codecForName("UTF-8"); label->setText(codec->toUnicode("<center><h1>你好</h1></center>"));  label->setWindowTit

Zabbix 2.2.4 无法显示中文解决办法

安装了zabbix2.2.4 在web界面profile中选择语言的时候没有中文zh_CN,并不是2.2.4版本不支持中文而是在zabbix/locales.inc.php中没有开启中文选项显示. 修改locales.inc.php将中文开启: [[email protected] ~]# vim /var/www/html/zabbix2.2.4/include/locales.inc.php 刷新zabbix web界面,查看语言选项: Zabbix 2.2.4 无法显示中文解决办法