在表格单元格内分层图像

Question

我想在一个带有 css 的表格单元内将 4 个图像叠加在一起。这是我希望最终图像的样子：

这4张图片是：

1. 灰色圆角矩形 带有红色阴影三角形和 数字
2. 蓝色条
3. 栏顶部的线条
4. 黄色三角形指示器

所有这些图像必须在表格单元格中彼此重叠。该条必须能够拉伸（如果可能的话，我会使用具有可变宽度属性的 css div 来绘制它）和可以移动的三角形指示器，所以整个东西不能是一个图像。

任何想法如何做到这一点？

注意：任何解决方案都必须在 IE6 及更高版本、Firefox 和 Chrome 中运行

Answer 1

这是你想做的吗？：How to let an HTML image overlap another

Answer 2

如果这是我的挑战，我想我会寻找一个成熟的图表解决方案，以使其成为一个快速、轻松的过程，并提供更好看（和动画？）的结果。

这是我用一些快速的 Google-Fu 发现的一个近乎死掉的铃声：http://www.fusioncharts.com/widgets/Gallery/Linear1.html

我最近不得不为我构建的应用程序绘制大量图表，并且我——曾经——手动滚动我的所有图表和表格。不再！在 HighChart、FusionCharts 和 JqueryUI 之间，这一切都涵盖了，没有理由发明轮子……而且它们看起来更好。