css-如何在html圖片上方疊加一個半透明顏色層，並在半透明顏色層上疊加文字

如何在html圖片上方疊加一個半透明顏色層，並在半透明顏色層上疊加文字

問題是這樣的：在用html寫網頁，現在有一張圖片，需要置於最底層，然後在圖片上方疊加一個半透明顏色層，並在半透明顏色層上疊加文字。
效果就像這張圖片一樣:

我寫的代碼如下:
li
div class="img-wrapper"
img src="0.jpg" alt="" width="110" height="110" border="0" /
/div
span 00:00:02 /span
/li
(沒寫<>的原因是:會被當成html代碼，你們就看不到了)
但是文字在圖片下方，並且半透明的顏色也不知道怎麼寫
哪位朋友能指導一下代碼該如何寫，十分感謝

最佳回答：

li relative定位，span absolute定位+opacity濾鏡實現半透明效果，你發html代碼的時候用</>這個工具欄按鈕格式話一下你的按鈕

DEMO

 <style>
li{float:left;position:relative;}
li span.time{position:absolute;left:0px;bottom:0px;height:30px;background:#000;display:block;zoom:1;filter:alpha(opacity=40);opacity:0.4;width:100%;color:#fff;line-height:30px}
</style>
<ul><li>
<div class="img-wrapper">
<img src="0.jpg" alt="" width="110" height="110" border="0" alt="圖片..." />
<span class="time">00:00:02 </span>
</div></li></ul>