在表格单元格内分层图像 [英] Layering images inside a table-cell

问题描述

我想在具有CSS的表格单元中将4张图像彼此叠加.这是我希望最终图像看起来像的样子:

I want to layer 4 images on top of each other inside a table cell with css. Here is what I want the final image to look like:

这4张图片是:

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

1. The gray rounded corner rectangle with the red shaded triangle and the numbers
2. The blue bar
3. The lines on top of the bar
4. The yellow triangular indicator

所有这些图像必须在一个表单元格中彼此重叠.条形图必须能够拉伸(如果可能的话，我会使用具有可变宽度属性的css div绘制它)，并且三角形指示器可以移动，因此整个对象不能是一张图像.

All these images must be on top of each other within the a table-cell. The bar must be able to stretch (I would draw it with a css div with a variant width property if it's possible) and the triangle indicator to move, so the entire thing can't be one image.

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

Any ideas how to do this?

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

Note: any solutions have to work in IE6 and up, Firefox, and Chrome

推荐答案

这是您想要做的吗?:

Would this be what you want to do?: How to let an HTML image overlap another

这篇关于在表格单元格内分层图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！