如果你设计的DIV内的内容不会占用两个颜色的区域。就用下面的方法：
<div style="width: 300pxheight: 23pxborder-right: 150px solid bluebackground: yellow">这样就可以了</div>
如果你设计的DIV内的内容需要占用两个颜色的区域，那就还是用背景图吧。比如：
<div style="width: 300pxheight: 23pxbackground: url(这里放一个指定长度的黄色背景图) repeat-y blue">这样就可以了</div>
第二个问题没看明白。如果是说内容后面有个背景。直接用背景，然后可以通过CSS设置背景的启示位置。比如：
<div style="background: url(aaa.gif) 10 0 repeat-y">123</div>
这里面的 10 和 0 代表背景图起始的横坐标和纵坐标。
<!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" xml:lang="en" lang="en">
<head>
<title>CSS定义HR水平线</title>
<style type="text/css">
.hr0{ height:1pxborder:noneborder-top:1px dashed #0066CC}
.hr1{ height:1pxborder:noneborder-top:1px solid #555555}
.hr2{ height:3pxborder:noneborder-top:3px double red}
.hr3{ height:5pxborder:noneborder-top:5px ridge green}
.hr4{ height:10pxborder:noneborder-top:10px groove skyblue}
</style>
</head>
<body>
<hr class="hr0" />
<hr class="hr1" />
<hr class="hr2" />
<hr class="hr3" />
<hr class="hr4" />
</body>
</html>
