找回密码
 注册成为天翎用户
查看: 3461|回复: 11

[其他] 请问表单背景,表格背景能否统一修改?

[复制链接]
江苏海洋地质院 发表于 2015-3-30 09:12:12 | 显示全部楼层 |阅读模式
本帖最后由 jack 于 2015-3-30 18:32 编辑

(1)请问一张表单,它整体显示的背景色能否设置或者用图片代替,具体怎么做?
(2)一个表格,它的背景色能否统一修改,具体怎么做?,老是一个个在单元格中改太麻烦了;
jack 发表于 2015-3-30 11:17:41 | 显示全部楼层
可以直接设置body元素的背景,在表单中引用样式库,在样式库中写如“body{background-color:#f00;}”,背景图片也可以类似修改,把图片文件放到源码下,然后设置好相对路径。表格的背景修改也相同。
回复

使用道具 举报

 楼主| 江苏海洋地质院 发表于 2015-3-30 15:04:55 | 显示全部楼层
(1)在样式库中加了body{background-color:#FF00FF;}这句话,表单引用样式库了已经,但页面背景没有变化;
(2)用table{background-color:#FF00FF;},结果整个页面的背景都变成桃红色了?不是应该就只有表格背景变成桃红吗?
回复

使用道具 举报

jack 发表于 2015-3-30 16:10:41 | 显示全部楼层
两个应该都是相同的问题引起的,body不生效是因为table有背景颜色,遮挡住了,table加了颜色以后整个页面都变了背景色是因为Table铺满了整个页面
回复

使用道具 举报

 楼主| 江苏海洋地质院 发表于 2015-3-30 16:32:52 | 显示全部楼层
可能我没有说清楚,上面两句话我都是单独测试的,没有把body{background-color:#FF00FF;},table{background-color:#FF00FF;}放在同一个样式库中,是一句话一个样式库,所有不存在覆盖一说,我用的是M3版,你们有没有测试过,像我这样?
回复

使用道具 举报

jack 发表于 2015-3-30 16:54:54 | 显示全部楼层
1、不是覆盖,只是遮挡。html盒子模型是这样。table装在body标签里面,可以理解为table在前面,body在后面,如果table有背景的话,body是什么颜色也会被table挡掉的。
2、现在的情况应该是table和body大小一致,而table有白色背景,所以body即使设置了背景也会被table原来的白色遮挡住。而table改了颜色以后整个页面变成table的颜色了应该是table铺满了整个页面的原因,所以是相同的原因。
回复

使用道具 举报

 楼主| 江苏海洋地质院 发表于 2015-3-30 17:54:06 | 显示全部楼层
ok,我说一下我要实现的效果,表单整个背景(就是底色)是红的,表格背景(就是源代码里面<table>标签以内的内容)是绿色的,效果图见附件,具体在一个样式库中怎么写?请你贴一段能用的代码就行了。

效果图

效果图
回复

使用道具 举报

jack 发表于 2015-3-30 18:25:00 | 显示全部楼层
  1. body{
  2.         background-color:#f00!important;
  3. }

  4. .bgTable {
  5.         background-color:#00f;
  6. }

  7. #contentTable {
  8.         background:none;
  9. }

  10. .front-bgcolor2 {
  11.         background:none;
  12. }
复制代码

样式库中这样写就可以了
回复

使用道具 举报

 楼主| 江苏海洋地质院 发表于 2015-3-30 19:17:14 | 显示全部楼层
还是一片红啊,请看附件,表格背景没有变成预期的蓝色...,
样式库是按照楼上给我的直接复制的,样式库没有加其它任何的代码,
表格的源代码我全贴出来,请帮我看一看?
  1. <table width="800" align="center" id="contentTable" border="1" cellspacing="1" cellpadding="1" style="border: 1px solid rgb(180, 204, 238);">
  2.     <caption></caption>
  3.     <tbody>
  4.         <tr>
  5.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;12345</td>
  6.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  7.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  8.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  9.         </tr>
  10.         <tr>
  11.             <td style="border: 1px solid rgb(180, 204, 238);">
  12.             <p>&nbsp;</p>
  13.             </td>
  14.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  15.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  16.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  17.         </tr>
  18.         <tr>
  19.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  20.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  21.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  22.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  23.         </tr>
  24.         <tr>
  25.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  26.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  27.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  28.             <td style="border: 1px solid rgb(180, 204, 238);">&nbsp;</td>
  29.         </tr>
  30.     </tbody>
  31. </table>
复制代码
效果图2.png
回复

使用道具 举报

 楼主| 江苏海洋地质院 发表于 2015-3-30 19:19:35 | 显示全部楼层
补充一下,上面那个效果图2中,表格里面本来是有一个文本框的,后来被我删掉了,所有代码里面没有体现;
回复

使用道具 举报

本版积分规则

手机版|天翎MyApps技术社区 ( 粤ICP备11093750号 )

GMT+8, 2026-8-14 07:50

Powered by Discuz! X5.0

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表