今天在项目的改版中遇到一个问题,div设置的背景图片(蓝色的),其调用的iframe里面的白色背景挡住了div的背景,后来经查看原来是在样式里统一引用了html,body{background:#fff;}
打开firefox看到body的背景色显示是body{background:#fff;}是调用的css里面的,想办法去除,但样式是通用的,只好想别的办法,替换body的属性,然后设置透明,<body style="background:#ffc;" background-color:transparent;>结果还是显示白色而不是div的蓝色;
继续查找问题,怀疑是iframe的不透明引起,但经查看iframe设置了allowtransparency="true",显然不是iframe的问题,经过测试发现样式里html,body{background:#fff;}不仅设置了body的背景是白色,同时设置了html的背景色为白色,去掉html改为body{background:#fff;},好了,显示的是div的蓝色背景,不过因为调用了iframe框架有n多个,能不能给个样式,这样即使有问题也只改样式即可,要不每个页面都添加style,到时修改也是麻烦,何况涉及到中英文两版呢。给每个页面添加了<body class="body">,样式里在body的后面添加样式定义.body{background:#0f0;background-color:transparent;},打开各个浏览器查看,呵呵,终于成功了,就一个简单的背景色问题,困扰我两个多小时,唯一不方便的是,每次的测试都是通过程序员修改,咱只有改样式的权限,没有改页面的权限。好在先在本地建立test页面测试了下。
涉及代码:
iframe透明:<iframe src="aa.html" allowtransparency="true">
背景色透明:添加到样式中
background-color:transparent;