2个div在一个图像下填充透明颜色[html]

Question

我有一个带有透明文本的图像，我有一种填充文本的纯色div，并允许用户更改颜色。现在这一切都起作用了，但当需要另一个div覆盖它下面的另一组透明文本时，就会出现问题。两个颜色的div只是堆叠在一起，但我希望第二个div在第一个div下面一点，但仍然在图像下面。

这是我的代码：

<tr><td colspan="3" style="border-bottom:solid 1px #eee;position:relative;">
        <img src="/sig/<?php echo $username; ?>?mask=1&bg=<?php echo $bg_name;?>" style="position: relative;width:240px;height:66px;z-index: 1;" id="selected_bg"/>
        <div style="position: absolute;top: 0;left: 5px;width: 96%;height: 20px;background: #<?php echo $session_array['usrname_color']; ?>" id="usrname_color"></div>
        <div style="position: absolute;top: 0;left: 5px;width: 96%;height: 20px;background: #<?php echo $session_array['text_color']; ?>" id="text_color"></div>
    </td></tr>

Answer 1

不确定我是如何让它工作的，但我在第二个div后面添加了"px"，它就工作了。看起来像这样：

<tr><td colspan="3" style="border-bottom:solid 1px #eee;position:relative;">
        <img src="/sig/<?php echo $username; ?>?mask=1&bg=<?php echo $bg_name;?>" style="position: relative;width:240px;height:66px;z-index: 1;" id="selected_bg"/>
        <div style="position: absolute;top: 0;left: 5px;width: 96%;height: 20px;background: #<?php echo $session_array['usrname_color']; ?>" id="usrname_color"></div>
        <div style="position: absolute;top: 20px;left: 5px;width: 96%;height: 40px;background: #<?php echo $session_array['text_color']; ?>" id="text_color"></div>
    </td></tr>