html图片上放图片 定位,将文本放在图像上的问题(CSS，相对定位)

所以我的问题是这样的;我有一个图像菜单(4张照片)，我想要在每张照片的顶部显示一些文字。我之前做过，但由于某种原因，这次它的全部梨形。我不想在css中将图像设置为背景，因为我认为它们是内容并希望它们处于标记中。

这是我做的CSS：

#club_menu{

position:relative;

padding:1px;

width:99.5%;

height:400px;

/*border: 1px solid #A424A9;*/

}

#club_menu a{

position:relative;

width:295px;

}

#club_menu a h2{

position:absolute;

top:100px;

left:0;

width:100%;

}

#club_menu h2 span{

color:white;

font:bold 24px/45px Helvetica, sans-serif;

letter-spacing:-1px;

background-color:#A424A9;

filter:alpha(opacity=70);

opacity:0.7;

padding:10px;

}和HTML：

Aquum Tuesday

Movida Wednesday

Whisky Thursday

Jalouse Tuesday

我已经玩了一个多小时，标签遍布全球。我的图像完美无缺。有人可以用一些CSS技巧，请赐教。

非常感谢，