div如何按高度分背景颜色

如果一个div的高度是100，如何0到50是一个颜色，50到100是一个颜色

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>
    <title>无标题页</title>
</head>
<body>
<div>
<div id="div1" style="height:50px;width:50;background-color:Red"></div>
<div id="div2" style="height:50px;width:50;background-color:Blue"></div>
</div>
</body>
</html>
那楼主应该在整个div里再加两个div同等高度，来控制就可以了，要是在里面控制的话，js
还真不好说
原来的div里面已经有内容了。
这样的话会在原先的内容下多两个div
<html>
    <table border="1">
    <tr>
     <td>
     <div style="height=50px;background-color: red">红色区域</div>
     <div style="height=50px;background-color: blue">蓝色区域</div>
      </td>
    </tr>
    </table>
</html>
另外你可以把style="height=50px"中的高度根据需求动态复制展现的
增加一个DIV 然后增加一个Z轴属性，吧新增的Z轴属性值设低点原来的DIV中的属性值设置高点。这样就原先DIV的内容会在后面增加DIV的内容上面。如此便可以在原有内容的基础上设置颜色不同的底色
？？？CSS3.0  可以实现  ，楼主去研究下
做一个高度为100的颜色条，0到50一个颜色，50到100一个颜色。如color.png设置为div的背景色：
background: url(image/color.png) repeat-x top;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <style type="text/css">
  div{
width:100px;
height:100px;
  }
  </style>
</HEAD> <BODY>
<div style="position:absolute;">
<table width="100";>
<TR>
<td height="50" bgcolor='red'></td>
</TR>
<TR>
<td height="50" bgcolor='black'></td>
</TR>
</table>
</div>
</BODY>
</HTML>